WebKit Bugzilla
Attachment 342758 Details for
Bug 186529
: Disable some vestibular trigger animations when prefers-reduced-motion is active.
Home
|
New
|
Browse
|
Search
|
[?]
|
Reports
|
Requests
|
Help
|
New Account
|
Log In
Remember
[x]
|
Forgot Password
Login:
[x]
[patch]
Patch
bug-186529-20180614134413.patch (text/plain), 5.56 KB, created by
Jon Davis
on 2018-06-14 13:44:13 PDT
(
hide
)
Description:
Patch
Filename:
MIME Type:
Creator:
Jon Davis
Created:
2018-06-14 13:44:13 PDT
Size:
5.56 KB
patch
obsolete
>Subversion Revision: 232851 >diff --git a/Websites/webkit.org/ChangeLog b/Websites/webkit.org/ChangeLog >index d2f3c4e11f056f2adeee8f026e7f50a7e1e348bb..870b425062b633fa09c8fe255eff0472d4e3c920 100644 >--- a/Websites/webkit.org/ChangeLog >+++ b/Websites/webkit.org/ChangeLog >@@ -1,5 +1,25 @@ > 2018-06-14 Jon Davis <jond@apple.com> > >+ Disable some vestibular trigger animations when prefers-reduced-motion is active. >+ https://bugs.webkit.org/show_bug.cgi?id=186529 >+ >+ Reviewed by NOBODY (OOPS!). >+ >+ * wp-content/themes/webkit/style.css: >+ (@supports ( -webkit-backdrop-filter: blur(10px) )): >+ (footer): >+ (header .menu-item-has-children .label-toggle::after): >+ (@media (prefers-reduced-motion)): Added. >+ (article,): >+ (@media only screen and (max-width: 920px)): >+ (.main-menu.label-toggle): >+ (header .menu): >+ (@media only screen and (max-width: 690px)): >+ (@media only screen and (max-width: 415px)): >+ (@media only screen and (max-height: 415px)): >+ >+2018-06-14 Jon Davis <jond@apple.com> >+ > Minor layout fix for WebKit Feature Status Page > https://bugs.webkit.org/show_bug.cgi?id=186539 > >diff --git a/Websites/webkit.org/wp-content/themes/webkit/style.css b/Websites/webkit.org/wp-content/themes/webkit/style.css >index 1ac8da1d3612a1fa559e73dfeea7ca5c809adf7d..40f7919a9c80625dbaf165ef987f15a12f8da7d7 100644 >--- a/Websites/webkit.org/wp-content/themes/webkit/style.css >+++ b/Websites/webkit.org/wp-content/themes/webkit/style.css >@@ -250,13 +250,13 @@ header { > } > > @supports ( -webkit-backdrop-filter: blur(10px) ) { >- >+ > .home header { > background-color: transparent; > backdrop-filter: blur(0px); > -webkit-backdrop-filter: blur(0px); > } >- >+ > .sub-menu-layer { > backdrop-filter: blur(10px); > -webkit-backdrop-filter: blur(10px); >@@ -424,7 +424,7 @@ footer { > clear: both; > width: 100%; > padding-bottom: 1.65rem; >- box-sizing: border-box; >+ box-sizing: border-box; > } > > footer .menu { >@@ -1567,7 +1567,7 @@ input.menu-toggle { > } > > footer { >- >+ > } > > footer nav { >@@ -1624,11 +1624,11 @@ header .menu-item-has-children .label-toggle::after { > margin-left: 0.5rem; > margin-top: -0.1rem; > content: ''; >- >+ > -webkit-filter: invert(100%); > filter: invert(100%); >- perspective: 600; >- >+ perspective: 600; >+ > transition: transform 0.3s ease-out; > } > >@@ -1703,6 +1703,16 @@ header .menu-item { /* add bottom dimension to main menu items */ > margin-top: 0; > } > >+/** Accessibility **/ >+ >+@media (prefers-reduced-motion) { >+ article, >+ .feature-status-page { >+ -webkit-animation: fade-in 0.7s; >+ animation: fade-in 0.7s; >+ } >+} >+ > /** Screen Breakpoints **/ > > @media only screen and (max-width: 1180px) { >@@ -1759,7 +1769,7 @@ header .menu-item { /* add bottom dimension to main menu items */ > cursor: pointer; > > transition: transform 0.3s ease-out; >- >+ > -webkit-filter: invert(100%); > filter: invert(100%); > perspective: 600; >@@ -1784,12 +1794,12 @@ header .menu-item { /* add bottom dimension to main menu items */ > width: 100vw; > overflow: hidden; > box-shadow: 0px 5px 5px rgba(0,0,0,0.10); >- >+ > backdrop-filter: blur(20px); > -webkit-backdrop-filter: blur(10px); > background-color: rgba(255,255,255,0.8); > } >- >+ > header nav a { > color: #333333; > } >@@ -1864,14 +1874,14 @@ header .menu-item { /* add bottom dimension to main menu items */ > footer nav li { > padding: 0 3rem 3rem 0; > } >- >+ > } > > @media only screen and (max-width: 690px) { > article h1 { > font-size: 3.4rem; > } >- >+ > .featured-tile { > padding: 0; > } >@@ -1934,7 +1944,7 @@ header .menu-item { /* add bottom dimension to main menu items */ > .nextrouter-copy { > font-size: 2.2rem; > } >- >+ > article .scrollable { > overflow: auto; > -webkit-overflow-scrolling: touch; >@@ -2035,7 +2045,7 @@ header .menu-item { /* add bottom dimension to main menu items */ > > } > >-@media only screen and (max-width: 415px) { >+@media only screen and (max-width: 415px) { > .table-of-contents { > /* Go one-column */ > width: 100vw; >@@ -2045,7 +2055,7 @@ header .menu-item { /* add bottom dimension to main menu items */ > float: none; > margin: 0 0 3rem 0; > } >- >+ > .nextrouter-copy { > font-size: 1.7rem; > letter-spacing: -0.016rem; >@@ -2053,7 +2063,7 @@ header .menu-item { /* add bottom dimension to main menu items */ > } > > @media only screen and (max-height: 415px) { >- >+ > .home .site-logo { > opacity: 1; > margin-top: 0; >@@ -2063,7 +2073,7 @@ header .menu-item { /* add bottom dimension to main menu items */ > .home header { > padding-top: 1rem; > } >- >+ > @supports(padding:max(0px)) { > header, > header .menu, >@@ -2077,21 +2087,21 @@ header .menu-item { /* add bottom dimension to main menu items */ > padding-left: env(safe-area-inset-left); > padding-right: env(safe-area-inset-right); > } >- >+ > header .menu .menu-item > .sub-menu { > border: none; > background: none; > } >- >+ > .sub-menu-layer { > padding: 0 3rem; > } >- >+ > .sub-menu-layer .menu-item:first-child, > .sub-menu-layer .menu-item { > padding: 0 0 1.5rem 1.5rem; > } >- >+ > } > > .tile {
You cannot view the attachment while viewing its details because your browser does not support IFRAMEs.
View the attachment on a separate page
.
View Attachment As Diff
View Attachment As Raw
Actions:
View
|
Formatted Diff
|
Diff
Attachments on
bug 186529
:
342758
|
344977
|
345003