Bug 244154

Summary: REGRESSION (STP): Page on plannedparenthood.org flashes continuously, repainting with a different font width
Product: WebKit Reporter: Ahmad Saleem <ahmad.saleem792>
Component: CSSAssignee: Nobody <webkit-unassigned>
Status: RESOLVED DUPLICATE    
Severity: Normal CC: ap, bfulgham, karlcow, mmaxfield, rniwa, simon.fraser, webkit-bug-importer, zalan
Priority: P2 Keywords: InRadar, NeedsReduction, Regression
Version: Safari Technology Preview   
Hardware: Mac (Apple Silicon)   
OS: macOS 12   
URL: https://www.plannedparenthood.org/learn/pregnancy/fertility-treatments/what-iui
See Also: https://bugs.webkit.org/show_bug.cgi?id=243123
https://bugs.webkit.org/show_bug.cgi?id=243424
Attachments:
Description Flags
Video Recording - Flashing - macOS 12.5.1
none
network fetches none

Description Ahmad Saleem 2022-08-20 04:54:57 PDT
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!
Comment 1 Alexey Proskuryakov 2022-08-20 10:11:26 PDT
I cannot reproduce this on STP 151 on macOS Ventura beta.
Comment 2 Ahmad Saleem 2022-08-20 11:44:49 PDT
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.
Comment 3 Radar WebKit Bug Importer 2022-08-20 14:27:25 PDT
<rdar://problem/98931768>
Comment 4 Karl Dubost 2022-08-21 22:02:40 PDT
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.
Comment 5 Karl Dubost 2022-08-28 18:10:46 PDT
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.
Comment 6 Karl Dubost 2022-08-29 21:12:33 PDT
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.
Comment 7 Karl Dubost 2022-08-29 22:06:27 PDT

<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
Comment 8 Karl Dubost 2022-08-29 22:53:44 PDT
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
Comment 9 Ahmad Saleem 2022-08-29 23:55:42 PDT
(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.
Comment 10 Alexey Proskuryakov 2022-08-30 09:37:05 PDT
I couldn't reproduce on a M1 Max 16" MacBook Pro.
Comment 11 Karl Dubost 2022-08-30 16:21:04 PDT
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.
Comment 12 Ryosuke Niwa 2022-09-08 15:04:43 PDT

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