1927053 - e.issuu.com - Magazine pages are not fully loaded and navigation is laggy

Status: REOPENED

(Core :: Graphics: Canvas2D, defect, P3)

Description

[Calin Tanase]

From github: https://github.com/webcompat/web-bugs/issues/143171.

<!-- @browser: Firefox 131.0 -->
<!-- @ua_header: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:131.0) Gecko/20100101 Firefox/131.0 -->
<!-- @reported_with: unknown -->

URL: https://e.issuu.com/embed.html?d=2024_10_19_mdj_mdj_c_001&u=cobblifemagazine

Browser / Version: Firefox 131.0
Operating System: Mac OS 14.7
Tested Another Browser: Yes Edge

Problem type: Something else
Description: Pages turn very slowly
Steps to Reproduce:
Try turning the pages with the buttons, it's very laggy compared to Edge

<details>
<summary>Browser Configuration</summary>
<ul>
<li>None</li>
</ul>
</details>

From webcompat.com with ❤️

Change performed by the Move to Bugzilla add-on.

Comment 1

[Calin Tanase]

Performance Profile: https://share.firefox.dev/4fjT62y

Comment 2

[Calin Tanase]

Attachment: Nightly vs Chrome.mp4

Comment 3

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 4

[Brad Werth [:bradwerth] | Out until Feb 2025]

We're spending a lot of time in GL_ReadPixels and in TexUnpackBlob::ConvertIfNeeded. When running the site, animations seem to be very smooth as long as the to-be-revealed texture is in cache.

Comment 5

[Glenn Watson [:gw]]

Could we get a profile with screenshots disabled?

Comment 6

[Brad Werth [:bradwerth] | Out until Feb 2025]

Lee, would you take a look at this please, since it appears to be a webgl canvas issue?

Comment 7

[Mayank Bansal]

(In reply to Glenn Watson [:gw] from comment #5)

Could we get a profile with screenshots disabled?

https://share.firefox.dev/4f4zKyY (Win11x64 + AMD iGPU)

Comment 8

[Kelsey Gilbert [:jgilbert]]

The issue here is that content locks up because it's waiting on the gpu process to calculate text metrics in DWriteGlyphRunAnalysis::Create:

GlyphRunAnalysis::GlyphRunAnalysis(ClientSideCacheContext&, FontFace const&, DWRITE_FONT_SIMULATIONS, DWRITE_GLYPH_RUN const*, float, DWRITE_MATRIX const*, DWRITE_RENDERING_MODE1, bool, DWRITE_MEASURING_MODE, DWRITE_GRID_FIT_MODE, DWRITE_TEXT_ANTIALIAS_MODE, float, float, unsigned char*) [dwrite.dll]
DWriteGlyphRunAnalysis::DWriteGlyphRunAnalysis(DWRITE_GLYPH_RUN const*, float, DWRITE_MATRIX const*, DWRITE_RENDERING_MODE1, bool, DWRITE_MEASURING_MODE, DWRITE_GRID_FIT_MODE, DWRITE_TEXT_ANTIALIAS_MODE, float, float, unsigned char*) [dwrite.dll]
DWriteGlyphRunAnalysis::Create(DWRITE_GLYPH_RUN const*, float, DWRITE_MATRIX const*, DWRITE_RENDERING_MODE1, bool, DWRITE_MEASURING_MODE, DWRITE_GRID_FIT_MODE, DWRITE_TEXT_ANTIALIAS_MODE, float, float) [dwrite.dll]
DWriteFactory::CreateGlyphRunAnalysis(DWRITE_GLYPH_RUN const*, float, DWRITE_MATRIX const*, DWRITE_RENDERING_MODE, DWRITE_MEASURING_MODE, float, float, IDWriteGlyphRunAnalysis**) [dwrite.dll]
SkScalerContext_DW::generateDWMetrics(SkGlyph const&, DWRITE_RENDERING_MODE, DWRITE_TEXTURE_TYPE, SkRect*) [gfx/skia/skia/src/ports/SkScalerContext_win_dw.cpp]
SkScalerContext_DW::generateMetrics(SkGlyph const&, SkArenaAlloc*) [gfx/skia/skia/src/ports/SkScalerContext_win_dw.cpp]
SkScalerContext::internalMakeGlyph(SkPackedGlyphID, SkMask::Format, SkArenaAlloc*) [gfx/skia/skia/src/core/SkScalerContext.cpp]
SkScalerContext::makeGlyph(SkPackedGlyphID, SkArenaAlloc*) [gfx/skia/skia/src/core/SkScalerContext.cpp]
SkStrike::digestFor(skglyph::ActionType, SkPackedGlyphID) [gfx/skia/skia/src/core/SkStrike.cpp]
(anonymous namespace)::prepare_for_direct_mask_drawing(SkStrike*, SkMatrix const&, SkZip<const unsigned short,const SkPoint>, SkZip<const SkGlyph *,SkPoint>, SkZip<unsigned short,SkPoint>) [gfx/skia/skia/src/core/SkGlyphRunPainter.cpp]
SkGlyphRunListPainterCPU::drawForBitmapDevice(SkCanvas*, SkGlyphRunListPainterCPU::BitmapDevicePainter const*, sktext::GlyphRunList const&, SkPaint const&, SkMatrix const&) [gfx/skia/skia/src/core/SkGlyphRunPainter.cpp]
SkDraw::drawGlyphRunList(SkCanvas*, SkGlyphRunListPainterCPU*, sktext::GlyphRunList const&, SkPaint const&) const [gfx/skia/skia/src/core/SkDraw_text.cpp]
SkBitmapDevice::onDrawGlyphRunList(SkCanvas*, sktext::GlyphRunList const&, SkPaint const&) [gfx/skia/skia/src/core/SkBitmapDevice.cpp]
SkDevice::drawGlyphRunList(SkCanvas*, sktext::GlyphRunList const&, SkPaint const&) [gfx/skia/skia/src/core/SkDevice.cpp]
SkCanvas::onDrawGlyphRunList(sktext::GlyphRunList const&, SkPaint const&) [gfx/skia/skia/src/core/SkCanvas.cpp]
SkCanvas::onDrawTextBlob(SkTextBlob const*, float, float, SkPaint const&) [gfx/skia/skia/src/core/SkCanvas.cpp]
SkCanvas::drawTextBlob(SkTextBlob const*, float, float, SkPaint const&) [gfx/skia/skia/src/core/SkCanvas.cpp]
SkCanvas::drawTextBlob(sk_sp<SkTextBlob> const&, float, float, SkPaint const&) [gfx/skia/skia/include/core/SkCanvas.h]
mozilla::gfx::DrawTargetSkia::DrawGlyphs(mozilla::gfx::ScaledFont*, mozilla::gfx::GlyphBuffer const&, mozilla::gfx::Pattern const&, mozilla::gfx::StrokeOptions const*, mozilla::gfx::DrawOptions const&, SkShader*) [gfx/2d/DrawTargetSkia.cpp]
mozilla::gfx::DrawTargetSkia::DrawGlyphMask(mozilla::gfx::ScaledFont*, mozilla::gfx::GlyphBuffer const&, mozilla::gfx::DeviceColor const&, mozilla::gfx::StrokeOptions const*, mozilla::gfx::DrawOptions const&) [gfx/2d/DrawTargetSkia.cpp]
mozilla::gfx::SharedContextWebgl::DrawGlyphsAccel(mozilla::gfx::ScaledFont*, mozilla::gfx::GlyphBuffer const&, mozilla::gfx::Pattern const&, mozilla::gfx::DrawOptions const&, mozilla::gfx::StrokeOptions const*, bool) [dom/canvas/DrawTargetWebgl.cpp]
mozilla::gfx::DrawTargetWebgl::FillGlyphs(mozilla::gfx::ScaledFont*, mozilla::gfx::GlyphBuffer const&, mozilla::gfx::Pattern const&, mozilla::gfx::DrawOptions const&) [dom/canvas/DrawTargetWebgl.cpp]
mozilla::gfx::RecordedFillGlyphs::DrawGlyphs(mozilla::gfx::DrawTarget*, mozilla::gfx::ScaledFont*, mozilla::gfx::GlyphBuffer const&, mozilla::gfx::Pattern const&) const [gfx/2d/RecordedEventImpl.h]
mozilla::gfx::RecordedDrawGlyphs<mozilla::gfx::RecordedFillGlyphs>::PlayEvent(mozilla::gfx::Translator*) const [gfx/2d/RecordedEventImpl.h]
std::_Func_class<bool,mozilla::gfx::RecordedEvent *>::operator()(mozilla::gfx::RecordedEvent*) const [/builds/worker/fetches/vs/VC/Tools/MSVC/14.39.33519/include/functional]
mozilla::gfx::RecordedEvent::DoWithEvent<mozilla::gfx::MemReader>(mozilla::gfx::MemReader&, mozilla::gfx::RecordedEvent::EventType, std::function<bool (mozilla::gfx::RecordedEvent *)> const&) [gfx/2d/RecordedEventImpl.h]
mozilla::gfx::RecordedEvent::DoWithEventFromReader(mozilla::gfx::MemReader&, mozilla::gfx::RecordedEvent::EventType, std::function<bool (mozilla::gfx::RecordedEvent *)> const&) [gfx/2d/RecordedEvent.cpp]
mozilla::layers::CanvasTranslator::TranslateRecording() [gfx/layers/ipc/CanvasTranslator.cpp]
mozilla::layers::CanvasTranslator::HandleCanvasTranslatorEvents() [gfx/layers/ipc/CanvasTranslator.cpp]
mozilla::detail::RunnableMethodArguments<>::apply<nsMemoryReporterManager,nsresult (nsMemoryReporterManager::*)()>::<lambda_1>::operator()() const [xpcom/threads/nsThreadUtils.h]
std::invoke(mozilla::detail::RunnableMethodArguments<>::apply<nsMemoryReporterManager,nsresult (nsMemoryReporterManager::*)()>::<lambda_1>&&) [/builds/worker/fetches/vs/VC/Tools/MSVC/14.39.33519/include/type_traits]
std::_Apply_impl(mozilla::detail::RunnableMethodArguments<>::apply<nsMemoryReporterManager,nsresult (nsMemoryReporterManager::*)()>::<lambda_1>&&, std::tuple<>&, std::integer_sequence<unsigned long long>) [/builds/worker/fetches/vs/VC/Tools/MSVC/14.39.33519/include/tuple]
std::apply(mozilla::detail::RunnableMethodArguments<>::apply<nsMemoryReporterManager,nsresult (nsMemoryReporterManager::*)()>::<lambda_1>&&, std::tuple<>&) [/builds/worker/fetches/vs/VC/Tools/MSVC/14.39.33519/include/tuple]
mozilla::detail::RunnableMethodArguments<>::apply(nsMemoryReporterManager*, nsresult (nsMemoryReporterManager::*)()) [xpcom/threads/nsThreadUtils.h]
mozilla::detail::RunnableMethodImpl<nsMemoryReporterManager *,nsresult (nsMemoryReporterManager::*)(),1,0>::Run() [xpcom/threads/nsThreadUtils.h]
nsThread::ProcessNextEvent(bool, bool*) [xpcom/threads/nsThread.cpp]
NS_ProcessNextEvent(nsIThread*, bool) [xpcom/threads/nsThreadUtils.cpp]
mozilla::ipc::MessagePumpForNonMainThreads::Run(base::MessagePump::Delegate*) [ipc/glue/MessagePump.cpp]
MessageLoop::RunInternal() [ipc/chromium/src/base/message_loop.cc]
MessageLoop::RunHandler() [ipc/chromium/src/base/message_loop.cc]
MessageLoop::Run() [ipc/chromium/src/base/message_loop.cc]
nsThread::ThreadFunc(void*) [xpcom/threads/nsThread.cpp]
_PR_NativeRunThread(void*) [nsprpub/pr/src/threads/combined/pruthr.c]
pr_root(void*) [nsprpub/pr/src/md/windows/w95thred.c]
thread_start<unsigned int (__cdecl*)(void *),1> [ucrtbase.dll]
BaseThreadInitThunk [KERNEL32.DLL]
mozilla::interceptor::FuncHook<mozilla::interceptor::WindowsDllInterceptor<mozilla::interceptor::VMSharingPolicyShared>,void (*)(int, void *, void *)>::operator()(int&, void*&, void*&) const [toolkit/xre/dllservices/mozglue/nsWindowsDllInterceptor.h]
patched_BaseThreadInitThunk(int, void*, void*) [toolkit/xre/dllservices/mozglue/WindowsDllBlocklist.cpp]
RtlUserThreadStart [ntdll.dll]
(root)

Comment 9

[Kelsey Gilbert [:jgilbert]]

The page is doing asking us to do a lot of work, and we don't seem to be caching this.

Under canvas-rr I see:

[153:18] $243 . set font ( "400 50px "f2_2" )
[153:19] $243 . set fillStyle ( "rgba(35,31,32,1) )
[153:20] $243 . setTransform ( 0.5862299465240641 , 0 , 0 , 0.5862299465240641 , 0 , 0 )
[153:21] $243 . transform ( 0.45333331823349 , 0 , 0 , 0.45333331823349 , 133.02120971679688 , 92.438232421875 )
[153:22] $243 . fillText ( "S , 0 , 0 )
[153:23] $243 . fillText ( "A , 24.800020217895508 , 0 )
[153:24] $243 . fillText ( "T , 47.80501937866211 , 0 )
[153:25] $243 . fillText ( "U , 72.05502319335938 , 0 )
[153:26] $243 . fillText ( "R , 100.75502014160156 , 0 )
[153:27] $243 . fillText ( "D , 127.45501708984375 , 0 )
[153:28] $243 . fillText ( "A , 155.76002502441406 , 0 )
[153:29] $243 . fillText ( "y , 178.7999725341797 , 0 )
[153:30] $243 . fillText ( "/ , 202.7999725341797 , 0 )
[153:31] $243 . fillText ( "S , 224.0499725341797 , 0 )
[153:32] $243 . fillText ( "U , 248.85003662109375 , 0 )
[153:33] $243 . fillText ( "N , 277.5500183105469 , 0 )
[153:34] $243 . fillText ( "D , 307.9000244140625 , 0 )
[153:35] $243 . fillText ( "A , 336.1950378417969 , 0 )
[153:36] $243 . fillText ( "y , 359.2500305175781 , 0 )
[153:37] $243 . fillText ( ", , 379.8050537109375 , 0 )
[153:38] $243 . fillText ( "  , 392.155029296875 , 0 )
[153:39] $243 . fillText ( "O , 404.655029296875 , 0 )
[153:40] $243 . fillText ( "C , 433.9049072265625 , 0 )
[153:41] $243 . fillText ( "T , 462.10491943359375 , 0 )
[153:42] $243 . fillText ( "O , 485.4949035644531 , 0 )
[153:43] $243 . fillText ( "B , 514.7449340820312 , 0 )
[153:44] $243 . fillText ( "E , 542.3948974609375 , 0 )
[153:45] $243 . fillText ( "R , 567.9949340820312 , 0 )
[153:46] $243 . fillText ( "  , 594.695068359375 , 0 )
[153:47] $243 . fillText ( "1 , 607.195068359375 , 0 )
[153:48] $243 . fillText ( "9 , 630.5050659179688 , 0 )
[153:49] $243 . fillText ( "/ , 655.8551025390625 , 0 )
[153:50] $243 . fillText ( "2 , 677.1051025390625 , 0 )
[153:51] $243 . fillText ( "0 , 702.455078125 , 0 )
[153:52] $243 . fillText ( ", , 727.8050537109375 , 0 )
[153:53] $243 . fillText ( "  , 740.1550903320312 , 0 )
[153:54] $243 . fillText ( "2 , 752.6550903320312 , 0 )
[153:55] $243 . fillText ( "0 , 778.0050659179688 , 0 )
[153:56] $243 . fillText ( "2 , 803.3551025390625 , 0 )
[153:57] $243 . fillText ( "4 , 826.3551025390625 , 0 )
[153:58] $243 . set font ( "400 50px "f2_1" )
[153:59] $243 . set fillStyle ( "rgba(35,31,32,1) )
[153:60] $243 . setTransform ( 0.5862299465240641 , 0 , 0 , 0.5862299465240641 , 0 , 0 )
[153:61] $243 . transform ( 0.45333331823349 , 0 , 0 , 0.45333331823349 , 535.5169677734375 , 92.438232421875 )
[153:62] $243 . fillText ( "♦ , 0 , 0 )
[153:63] $243 . set font ( "400 50px "f2_2" )
[153:64] $243 . set fillStyle ( "rgba(35,31,32,1) )
[153:65] $243 . setTransform ( 0.5862299465240641 , 0 , 0 , 0.5862299465240641 , 0 , 0 )
[153:66] $243 . transform ( 0.45333331823349 , 0 , 0 , 0.45333331823349 , 563.4706420898438 , 92.438232421875 )
[153:67] $243 . fillText ( "M , 0 , 0 )
[153:68] $243 . fillText ( "A , 35.94993209838867 , 0 )
[153:69] $243 . fillText ( "R , 61.399932861328125 , 0 )
[153:70] $243 . fillText ( "I , 88.09992980957031 , 0 )
[153:71] $243 . fillText ( "E , 100.1999282836914 , 0 )
[153:72] $243 . fillText ( "T , 125.7999267578125 , 0 )
[153:73] $243 . fillText ( "T , 150.04994201660156 , 0 )
[153:74] $243 . fillText ( "A , 171.7749481201172 , 0 )

Comment 10

[Kelsey Gilbert [:jgilbert]]

Attachment: recording.canvas-rr.json

Comment 11

[Calin Tanase]

Performance profile without screenshots: https://share.firefox.dev/4eFtDA0

Comment 12

[Lee Salzman [:lsalzman]]

Attachment: Bug 1927053 - Optimize GlyphCache lookups. r?aosmond

Comment 13

[Pulsebot]

Pushed by [e-mail]:
https://hg.mozilla.org/integration/autoland/rev/94de3d8791d5
Optimize GlyphCache lookups. r=aosmond

Comment 14

[pstanciu]

https://hg.mozilla.org/mozilla-central/rev/94de3d8791d5

Comment 15

[BugBot [:suhaib / :marco/ :calixte]]

Since nightly and release are affected, beta will likely be affected too.
For more information, please visit BugBot documentation.

Comment 16

[BugBot [:suhaib / :marco/ :calixte]]

The patch landed in nightly and beta is affected.
:lsalzman, is this bug important enough to require an uplift?

• If yes, please nominate the patch for beta approval.
• If no, please set status-firefox134 to wontfix.

For more information, please visit BugBot documentation.

Comment 17

[Mayank Bansal]

This is waht I get with the latest Nightly: https://share.firefox.dev/3OPhrSI
Did not subjectively feel much better compared to my previous profile in comment #7 (https://share.firefox.dev/4f4zKyY)

Comment 18

[Lee Salzman [:lsalzman]]

There is not terribly much more that can be done here. It is trying to draw many tens of thousands of glyphs individually. Maybe the best I could do when I have more time to work on this bug is cause a mid-frame fallback to software of some sort, but that might not significantly improve performance either.

Comment 19

[Jeff Muizelaar [:jrmuizel]]

(In reply to Lee Salzman [:lsalzman] from comment #18)

There is not terribly much more that can be done here. It is trying to draw many tens of thousands of glyphs individually. Maybe the best I could do when I have more time to work on this bug is cause a mid-frame fallback to software of some sort, but that might not significantly improve performance either.

It performs well in Chrome and Safari. Why are they able to do it and we are not?

Comment 20

[Lee Salzman [:lsalzman]]

(In reply to Jeff Muizelaar [:jrmuizel] from comment #19)

(In reply to Lee Salzman [:lsalzman] from comment #18)

There is not terribly much more that can be done here. It is trying to draw many tens of thousands of glyphs individually. Maybe the best I could do when I have more time to work on this bug is cause a mid-frame fallback to software of some sort, but that might not significantly improve performance either.

It performs well in Chrome and Safari. Why are they able to do it and we are not?

The overheads here come from seemingly a combination of things that mostly occur only on Windows, i.e. DWrite CreateGlyphRunAnalysis and Direct3D draw calls. Those are fundamentally hard to work around on short notice.

There also seem to be inefficiencies in how we handle Canvas2D and WebGL interaction. The use-cases seems to be rendering a bunch of glyphs in a 2D canvas, then uploads that to a WebGL texture to use in WebGL, and we are doing what seems to be a slow synchronous readback in that case that is not so good. That is also a longer-term project to solve.

Comment 21

[Bas Schouten (:bas.schouten)]

The Performance Impact Calculator has determined this bug's performance impact to be low. If you'd like to request re-triage, you can reset the Performance Impact flag to "?" or needinfo the triage sheriff.

Impact on site: Causes noticeable jank
Websites affected: Rare
[x] Able to reproduce locally

Comment 22

[Mayank Bansal]

This is what i get with the latest Nightly: https://share.firefox.dev/3Enf07W