Styjun

Where are the "shires" in the UK?

Are pressure-treated posts that have been submerged for a few days ruined?

Did we get closer to another plane than we were supposed to, or was the pilot just protecting our delicate sensibilities?

When two pilots are required for a private aircraft, is it a requirement for the PIC to be ATPL?

Emotional immaturity of comic-book version of superhero Shazam

How can internet speed be 10 times slower without a router than when using a router?

What is a smasher?

Why do people keep telling me that I am a bad photographer?

Are Finitely generated modules over a ring also finitely generated over a subring containing the identity?

What if the end-user didn't have the required library?

Floor of Riemann zeta function

In Russian, how do you idiomatically express the idea of the figurative "overnight"?

Why are UK Bank Holidays on Mondays?

US born but as a child of foreign diplomat

Understanding trademark infringements in a world where many dictionary words are trademarks?

Can you Ready a Bard spell to release it after using Battle Magic?

Should I decline this job offer that requires relocating to an area with high cost of living?

Is there an idiom that support the idea that "inflation is bad"?

Word for Food that's Gone 'Bad', but is Still Edible?

My advisor talks about me to his colleague

Wrong answer from DSolve when solving a differential equation

What exactly are the `size issues' preventing formation of presheaves being a left adjoint to some forgetful functor?

Introducing Gladys, an intrepid globetrotter

Adjacent DEM color matching in QGIS

Safari iOS bug with 'mix-blend-mode' (particularly on iPad pro 10.5)

Positioning from fixed to staticDoes CSS mix-blend-mode work with transform?mix-blend-mode issues in ChromeMix Blend Mode BleedMix-Blend-Mode DifferenceHow to fix Safari mix-blend-mode: color-dodge bug?Mix-blend-mode breaks when out of viewportArray state will be cached in iOS 12 Safari. Is it a bug or feature?Animating scale on circle with centered text on top, with mix-blend-mode

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

I'm encountering a strange issue on my iPad where I have an svg with mix-blend-mode: screen to colour text like so:

CSS:

img 
 top: 0;
 right: 0;
 bottom: 0;
 width: 50vw;
 height: 100vh;
 position: fixed;
 mix-blend-mode: screen;
 z-index: 100;


#backing 
 background: white;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

HTML:

 <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg">
 <div id="backing"></div>
 <p>...content...</p>

See JSBIN here: https://jsbin.com/kunofal

On load, everything looks fine, but then on scroll, as soon as the top chrome shrinks, the image becomes solid: https://imgur.com/a/I62FrFX

Oddly enough, it also seems to happen only if more than one tab is open. It doesn't seem to be problematic on desktop or phone, only my 10.5" iPad Pro, on 12.1.4 (16D57), and only in portrait mode (oddly enough it works in landscape).

I've tried adding transform: translateZ(0); to no avail as per some recommendations about other mix-blend-mode bugs.

Is this a bug or am I doing something wrong?

ios css safari mix-blend-mode

share|improve this question

asked Mar 22 at 23:04

wafflwaffl

1,82344588

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tested this version of the iPad Pro from the XCode Simulator, but it wasn't breaking there.
  
  – Andy Hoffman
  Mar 22 at 23:20
  

  
  
  
  

add a comment | 

0

I'm encountering a strange issue on my iPad where I have an svg with mix-blend-mode: screen to colour text like so:

CSS:

img 
 top: 0;
 right: 0;
 bottom: 0;
 width: 50vw;
 height: 100vh;
 position: fixed;
 mix-blend-mode: screen;
 z-index: 100;


#backing 
 background: white;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

HTML:

 <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg">
 <div id="backing"></div>
 <p>...content...</p>

See JSBIN here: https://jsbin.com/kunofal

On load, everything looks fine, but then on scroll, as soon as the top chrome shrinks, the image becomes solid: https://imgur.com/a/I62FrFX

Oddly enough, it also seems to happen only if more than one tab is open. It doesn't seem to be problematic on desktop or phone, only my 10.5" iPad Pro, on 12.1.4 (16D57), and only in portrait mode (oddly enough it works in landscape).

I've tried adding transform: translateZ(0); to no avail as per some recommendations about other mix-blend-mode bugs.

Is this a bug or am I doing something wrong?

ios css safari mix-blend-mode

share|improve this question

asked Mar 22 at 23:04

wafflwaffl

1,82344588

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I tested this version of the iPad Pro from the XCode Simulator, but it wasn't breaking there.
  
  – Andy Hoffman
  Mar 22 at 23:20
  

  
  
  
  

add a comment | 

I'm encountering a strange issue on my iPad where I have an svg with mix-blend-mode: screen to colour text like so:

CSS:

img 
 top: 0;
 right: 0;
 bottom: 0;
 width: 50vw;
 height: 100vh;
 position: fixed;
 mix-blend-mode: screen;
 z-index: 100;


#backing 
 background: white;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

HTML:

 <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg">
 <div id="backing"></div>
 <p>...content...</p>

See JSBIN here: https://jsbin.com/kunofal

On load, everything looks fine, but then on scroll, as soon as the top chrome shrinks, the image becomes solid: https://imgur.com/a/I62FrFX

Oddly enough, it also seems to happen only if more than one tab is open. It doesn't seem to be problematic on desktop or phone, only my 10.5" iPad Pro, on 12.1.4 (16D57), and only in portrait mode (oddly enough it works in landscape).

I've tried adding transform: translateZ(0); to no avail as per some recommendations about other mix-blend-mode bugs.

Is this a bug or am I doing something wrong?

ios css safari mix-blend-mode

share|improve this question

asked Mar 22 at 23:04

wafflwaffl

1,82344588

img 
 top: 0;
 right: 0;
 bottom: 0;
 width: 50vw;
 height: 100vh;
 position: fixed;
 mix-blend-mode: screen;
 z-index: 100;


#backing 
 background: white;
 position: fixed;
 top: 0;
 left: 0;
 right: 0;
 bottom: 0;

 <img src="https://upload.wikimedia.org/wikipedia/commons/2/25/Red.svg">
 <div id="backing"></div>
 <p>...content...</p>

share|improve this question

asked Mar 22 at 23:04

wafflwaffl

1,82344588

share|improve this question

asked Mar 22 at 23:04

wafflwaffl

1,82344588

asked Mar 22 at 23:04

wafflwaffl

1,82344588

asked Mar 22 at 23:04

wafflwaffl

1,82344588