Bug 215094 – Setting a value for cursor interferes with a child's overflow-wrap value

• Status: RESOLVED
• Resolution: CONFIGURATION CHANGED
• Component: CSS

[Palmer Mebane]

An outer div specifying cursor: pointer causes a div inside of it to not apply an overflow-wrap property.

Here is a way to reproduce the issue.

HTML:
<div class="wrapbox">
  abcdefghijklmnopqrstuvwxyz
</div>
<div class="cursor">
  <div class="wrapbox">
    abcdefghijklmnopqrstuvwxyz
  </div>
</div>

CSS:
.wrapbox {
  border: 1px solid red;
  margin: 4px;
  padding: 4px;
  width: 100px;
  overflow-wrap: break-word;
}
.cursor {
  cursor: pointer;
}

(This can be previewed at this jsfiddle: https://jsfiddle.net/qc90bm6x/1/)

On Chrome and Firefox, the top and bottom box both wrap the text into two lines.

On Safari 13.1, the top box wraps the text. But the bottom box does not wrap and allows the text to overflow. This bottom box not wrapping is the unexpected behavior that this bug is about.

If one uses Safari's inspect element on the bottom box to look at computed styles, the computed overflow-wrap style is "normal". Expanding the list of rules that led to that style shows that .wrapbox wants to set the value to "break-word", and it somehow just doesn't get set.

A workaround is to set overflow-wrap: break-word; on the div with cursor: pointer. This suffices for both the repro above and the real situation where we encountered this.

[Radar WebKit Bug Importer]

<rdar://problem/66550142>

[Simon Fraser (smfr)]

Weird!

[Simon Fraser (smfr)]

This is something about style sharing and inherited properties.

[Simon Fraser (smfr)]

This might also be triggered by interaction with the deprecated "word-wrap" property.

[Ahmad Saleem]

I am not able to reproduce this bug in Safari 16 using JSFiddle from Comment 0 and the bottom box does not overflow and show similar rendering to "Chrome Canary 108" and "Firefox Nightly 107".

I am marking this as "RESOLVED CONFIGURATION CHANGED" but if it is reproducible then please reopen with updated testcase. Thanks!