WordPress.org

Make WordPress Core

Opened 18 months ago

Closed 18 months ago

Last modified 17 months ago

#25600 closed defect (bug) (fixed)

Twenty Fourteen scroll is noticable slow/jumpy/lagging on Firefox

Reported by: Ipstenu Owned by:
Milestone: 3.8 Priority: normal
Severity: normal Version: 3.8
Component: Bundled Theme Keywords:
Focuses: Cc:

Description

Originally posted on the WP Forums - http://wordpress.org/support/topic/firefox-lags-when-scrolling-twentyfourteen?replies=1

I can reproduce this on OS X/Firefox 24

Attachments (3)

25600.diff (3.5 KB) - added by iamtakashi 18 months ago.
pattern-light.svg (588 bytes) - added by iamtakashi 18 months ago.
pattern-dark.svg (558 bytes) - added by iamtakashi 18 months ago.

Download all attachments as: .zip

Change History (11)

comment:1 @iamtakashi18 months ago

This seems to be caused by the css background image pattern for the placeholder. Can anybody help to replicate it in a less cpu intensive way?

comment:2 @lancewillett18 months ago

  • Milestone changed from Awaiting Review to 3.8
  • Summary changed from TwentyFourteen scroll is noticable slow/jumpy/lagging on Firefox to Twenty Fourteen scroll is noticable slow/jumpy/lagging on Firefox

@iamtakashi18 months ago

@iamtakashi18 months ago

@iamtakashi18 months ago

comment:3 @iamtakashi18 months ago

Attached a patch with two svgs to replicate the pattern. In this way, we can reduce significantly CPU usage and they are scalable and crisp on hdpi/retina screens. Also svg are supported in IE9 which doesn't support CSS gradients.

comment:4 @lancewillett18 months ago

  • Keywords has-patch needs-testing added

Nice solution, Takashi. ;)

comment:5 @lancewillett18 months ago

In 25865:

Twenty Fourteen: use SVG images instead of CSS3 gradients for featured image background pattern. Props iamtakashi.

  • Fixes laggy loading in Firefox, see #25600.
  • Significantly reduces CPU usage.
  • Scalable and crisp on HiDPI/retina screens.
  • SVG is support in IE9 which doesn't support CSS gradients.

comment:6 @lancewillett18 months ago

  • Resolution set to fixed
  • Status changed from new to closed

comment:7 @lancewillett18 months ago

  • Keywords has-patch needs-testing removed

comment:8 @RDall17 months ago

For what it is worth and this may just be my opinion but the closer smaller lines of that are now in Twenty Fourteen still blur when you actually move the page.

This effect also appears on the left hand side menu page text and the entry meta below the header of the page.

You can see it in the screencast I took here (labeled in error twenty-thireen-bug) in http://f.cl.ly/items/2Z3P1T2Y1S2k1q210h3m/Twenty-Thirteen-bug.mov

A screen capture or an image could cause this as it is subject to your eye which causes the bluring technique I am showcasing in the above video. This is also why you don't see patterns like this on most Television programs as the broadcast equipment and your eye gets confused by the actually effect of the lines moving across the screen.

The only way to solve this issue is to increase the distance between the lines and then you eye doesn't confuse what is a line and what isn't.

How many people:

  • Are going to move the web page and see the effect? Not sure
  • How many people will not be bother by this? Also unsure… 

It just doesn't look right to me and I would avoid releasing the theme with this in place. But again this is just my opinion and observations.


Last edited 17 months ago by RDall (previous) (diff)
Note: See TracTickets for help on using tickets.