Sticky element not bordered

Browser Support Desktop Support
1

Problem:
A container with CSS-ordered border does not get borders when sticky.

Reproduction:
Create a sticky element inside a bordered container.

Expected:
Bordered element whether sticky or un-.

Brave Version:
1.38.119 Chromium: 101.0.4951.67 (Official Build) (64-bit)

Sample file:

<!DOCTYPE html>
<!--
Show that position:sticky drops border segments.
-->

<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropped Borders</title>

<style type="text/css">
.box, .sbox	{ float:left; background:#FFF; width:9rem; height:9rem; outline:1px solid #888; overflow:auto; }
.head		{ height:1.5rem; background:#9F9; outline:1px solid #888; }
.sbox .head	{ position:sticky; top:0; }
.item		{ display:table-row; }
</style>
	
</head>

<body>

<div>
  <div class="box">
  <div class="head">Not Sticky</div>
  <div class="item">11111</div>
  <div class="item">22222</div>
  </div>

  <div class="box">
  <div class="head">Not Sticky</div>
  <div class="item">11111</div>
  <div class="item">22222</div>
  </div>

  <div class="box">
  <div class="head">Not Sticky</div>
  <div class="item">11111</div>
  <div class="item">22222</div>
  <div class="item">33333</div>
  <div class="item">44444</div>
  <div class="item">55555</div>
  <div class="item">66666</div>
  <div class="item">77777</div>
  <div class="item">88888</div>
  <div class="item">99999</div>
  </div>

  <div class="sbox">
  <div class="head">Sticky</div>
  <div class="item">11111</div>
  <div class="item">22222</div>
  </div>

  <div class="sbox">
  <div class="head">Sticky</div>
  <div class="item">11111</div>
  <div class="item">22222</div>
  </div>

  <div class="sbox">
  <div class="head">Sticky</div>
  <div class="item">11111</div>
  <div class="item">22222</div>
  <div class="item">33333</div>
  <div class="item">44444</div>
  <div class="item">55555</div>
  <div class="item">66666</div>
  <div class="item">77777</div>
  <div class="item">88888</div>
  <div class="item">99999</div>
  </div>

</div>

</body>
</html>
2

Can you load it in jsfiddle and post the test link here? @BK091

3
4

(Brave top, Chrome bottom). I"m not seeing any difference between the two @BK091

5

It’s about the borders on the green headings. Look at the left-side borders right next to the words Not Sticky and Sticky. The Not Sticky headings have 1px borders on their left. The Sticky headings do not. In the CSS, the border is applied for class head (equally) but only sbox heads are sticky. Shouldn’t all heads have a border?

6

Is it applicable to Chrome also? Rendering-wise, Brave wouldn’t change anything here.

7

Sorry, I don’t know. I avoid Chrome (though I know Brave shares its kernel).

8

We use the same rendering engine as Chromium, so if its something in both browsers and considered a bug. It should be reported in https://bugs.chromium.org/p/chromium/issues/list

From my tests I saw no difference between Chrome and Brave

9

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.