Bug 244154 – REGRESSION (STP): Page on plannedparenthood.org flashes continuously, repainting with a different font width

• Component: CSS
• Status: RESOLVED DUPLICATE

[Ahmad Saleem]

Hi Team,

Thanks for making Webkit awesome every day.

I stumbled upon following website, which is flashing the content even in Private Mode to indicate that it is invalidating style continuously and I am not able to reproduce this in Safari 15.6.1 and other browsers and only Safari Technology Preview 151 is presenting this behavior:

Link - https://www.plannedparenthood.org/learn/pregnancy/fertility-treatments/what-iui

<<< STEPS TO REPRODUCE >>>

1) Visit Website

** ACTUAL RESULT **

Flashing content continuously

** EXPECTED RESULT **

Behave like Safari 15.6.1 or other browsers

_________

Unfortunately I don't have any reduction for this but just wanted to highlight ASAP before web-developer change or this behavior ship to production / stable builds.

Make Webkit more awesome.. Thanks!

[Alexey Proskuryakov]

I cannot reproduce this on STP 151 on macOS Ventura beta.

[Ahmad Saleem]

Created attachment 461769 [details]
Video Recording - Flashing - macOS 12.5.1

(In reply to Alexey Proskuryakov from comment #1)
> I cannot reproduce this on STP 151 on macOS Ventura beta.

I just captured a video to showcase issue using STP 151.

[Radar WebKit Bug Importer]

<rdar://problem/98931768>

[Karl Dubost]

Created attachment 461787 [details]
network fetches

I can NOT reproduce on Safari Version 16.1 (18614.2.1.1.1) on macOS Ventura Beta on MacBook Pro 13" M1.

I can reproduce on Safari STP 151 Version 16.0 (17615.1.1.2) on macOS Monterey on MacBook Pro 13" Intel


On a profile it seems to constantly reload this resource and time to time a couple of CSS.
https://fast.fonts.net/t/1.css?apiType=css&projectid=cb6b236d-f129-416d-8196-4f29ffe0c887

which is happening on MouseMove events being dispatched in 
https://www.plannedparenthood.org/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js

So maybe it has been fixed, a regression bisection could help confirm that.


I'm at 16000 fetches and still going on.

[Karl Dubost]

Tested on 

PASS: do not reproduce
FAIL: reproduce the issue

* PASS Safari Version 15.6.1 (17613.3.9.1.16) macOS Monterey - Intel
* FAIL Safari TP 151         (17615.1.1.2)    macOS Monterey - Intel
* FAIL Safari TP 152         (17615.1.2.3)    macOS Monterey - Intel
* PASS Safari Version 16.1   (18614.2.1.1.1)  macOS ventura beta - M1
* PASS Safari TP 152         (18615.1.2.3)    macOS ventura beta - M1 (1)


(1) Though for Safari TP 152 on Ventura without moving the mouse, and leaving the window Idle, time to time there is a glitch, but nothing on mousemove


So that seems hard to bi-sect to find out the culprit.

[Karl Dubost]

Ahmad, could you describe your device configuration?
Alexey, yours too. 

I'm trying to understand if this happening only on certain OS versions and/or hardware.

[Karl Dubost]

<link 
  rel="preload" 
  as="style" 
  href="https://fast.fonts.net/cssapi/cb6b236d-f129-416d-8196-4f29ffe0c887.css" />

<script 
  src="/cdn-cgi/scripts/7d0fa10a/cloudflare-static/rocket-loader.min.js" 
  data-cf-settings="c8446d81fabb38acc0204716-|49"></script>

<link 
  rel="stylesheet" 
  href="https://fast.fonts.net/cssapi/cb6b236d-f129-416d-8196-4f29ffe0c887.css" 
  media="print" 
  onload="this.media='all'"/>

<noscript>
  <link 
    rel="stylesheet" 
    href="https://fast.fonts.net/cssapi/cb6b236d-f129-416d-8196-4f29ffe0c887.css">
</noscript>


And 1.css is being constantly reloaded on mouse move.

which is the first line of https://fast.fonts.net/cssapi/cb6b236d-f129-416d-8196-4f29ffe0c887.css

with: 

@import url(/t/1.css?apiType=css&projectid=cb6b236d-f129-416d-8196-4f29ffe0c887);


ok

The issue seems to stop when I remove 

```
  onload="this.media='all'"/>
```

with a local override, but is it really the source. Yes it is. If add again the attribute in the local override It will recreate the issue. 


OK we may have now the source of the issue. 

What the code is telling us about this?


That could be similar to Bug 243123

[Karl Dubost]

ok this is a technique which seems to be recommended on stack overflow to load css asynchronously 
https://stackoverflow.com/questions/32759272/how-to-load-css-asynchronously

[Ahmad Saleem]

(In reply to Karl Dubost from comment #6)
> Ahmad, could you describe your device configuration?
> Alexey, yours too. 
> 
> I'm trying to understand if this happening only on certain OS versions
> and/or hardware.

I am using MacBook Pro M1 Pro with macOS 12.5.1.

[Alexey Proskuryakov]

I couldn't reproduce on a M1 Max 16" MacBook Pro.

[Karl Dubost]

Also probably
  media="print" 
should not be loaded at all. 
Bug 243424 shows that currently link media print is blocking the rendering when it should not.

[Ryosuke Niwa]

*** This bug has been marked as a duplicate of bug 244879 ***