I'm getting the following error in iOS 11 when scrolling through the page.
(In Firefox, Safari and Chrome). In Android devices the error is not happening.
These are background images, I don't know if that could be the reason that's causing the error.
Image 2 shows how the image is intended and shown in Android.
<div
className="shelf-page-lists-icons-background"
style={containerImage}
/>
<div
style={styles.container}
>
<p style={styles.listsTitle}>{list.title}</p>
</div>
CSS
containerImage = {
backgroundImage: url(${list.image}),
backgroundSize: 'cover',
height: 150,
borderRadius: 4,
position: 'absolute',
width: imageWidth,
overflow: 'hidden',
}
container: {
height: 150,
display: 'flex',
flexDirection: 'column',
justifyContent: 'flex-end',
marginBottom: 10,
padding: '0px 40px 13px 16px',
},
.shelf-page-lists-icons-background {
opacity: 0.84;
filter: brightness(0.4)
}
The problem seems to be related to the filters: Slow CSS Filters on iPhone?
I added these properties as metioned above and it seems to work:
-webkit-transform: translateZ(0);
-webkit-perspective: 1000;
-webkit-backface-visibility: hidden;
Related
I have a web app that draws lots of overflowed canvases with windows styled scroll bars.
Previously on iOS 12.X this worked fine and we had 17px scroll bars being overlayed, this behaviour still works-on Android Chrome, and all desktop browsers.
Here's a JS fiddle of a "typical" item we have https://jsfiddle.net/wf80rp5g/4/
css for it
.VTSOuterDiv {
width: 400px;
height: 400px;
overflow: auto;
}
::-webkit-scrollbar {
-webkit-appearance: none;
width: 17px;
height: 17px;
overflow: scroll;
}
::-webkit-scrollbar-track {
/* This color is also used by WIN_NODE's setCanvasSize method, so if we change this
then we should update that. */
background-color: rgb(240, 240, 240);
}
::-webkit-scrollbar-thumb {
background-color: rgb(205, 205, 205);
min-width: 10px;
min-height: 10px;
}
::-webkit-scrollbar-button {
display: normal;
background-color: rgb(240, 240, 240);
background-repeat: no-repeat;
background-position: center;
width: 17px;
height: 17px;
}
::-webkit-scrollbar-thumb:hover {
background-color: rgb(170, 170, 170);
}
::-webkit-scrollbar-thumb:active {
background-color: rgb(141, 141, 141);
}
::-webkit-scrollbar-button:hover {
background-color: rgb(170, 170, 170);
}
::-webkit-scrollbar-button:active {
background-color: rgb(141, 141, 141);
}
On desktop browser there's scroll bars, on chrome mobile and older safari there's scroll bars, but on 13.X we no longer get stylized scroll bars.
is there any known work arounds for this? the release notes aren't forth coming about this change.
This question already has answers here:
Bug in CSS3 rotateY transition on Safari?
(5 answers)
Closed 3 years ago.
Checkout the JSFiddle: https://jsfiddle.net/mavicnz/eph7bmx8/21/
Or CodePen if that's how you roll: https://codepen.io/W3-design/pen/pBOJyy
When I hover over the images on desktop the CSS transition works correctly, it rotates the image and changes the z-index to bring the hovered image to the foreground, the same behaviour doesn't happen when I "hover/tap" each image in iOS in both Safari and Chrome the CSS transition is OK but the z-index is all messed up.
You'll notice when the page loads that the z-index on iOS is not honoured at all and the images are displayed in markup order :(
I would like the iOS "hover/tap" result to be the same as the desktop.
NOTE: I have read some posts about adding translate3d to the img CSS but this doesn't work if you have multiple transforms like I want.
NOTE 2.0: I have used this CSS workaround to target Safari only as that's the browser with the problem.
is there a css hack for safari only NOT chrome?
NOTE 3.0: #Kaiido has provided the work around for this issue on iOS and MacOS, it is linked above.
NOTE 4.0: There is still the issue that the z-index is reversed in iOS, so the bottom image displays on top.
This fixes the z-index issue without the other transforms:
-webkit-transform: translate3d(0,0,0);
This doesn't fix the z-index issue:
-webkit-transform: translate3d(0,0,0) rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
HTML:
<div class="stacked-images">
<img src="https://via.placeholder.com/320x180/0000FF">
<img src="https://via.placeholder.com/320x180/FF0000">
<img src="https://via.placeholder.com/320x180/00FF00">
</div>
SCSS:
.stacked-images {
min-height: 500px;
position: relative;
margin: 20px;
img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
&:nth-of-type(1) {
z-index: 100;
top: 0;
}
&:nth-of-type(2) {
z-index: 90;
top: 80px;
}
&:nth-of-type(3) {
z-index: 80;
top: 160px;
}
&:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
}
}
CSS: (For those that need it)
.stacked-images {
position: relative;
margin: 20px;
}
.stacked-images img {
position: absolute;
opacity: 0.9;
transition: transform .5s ease-in-out;
transform: rotate3d(1,0,0,-55deg) rotate3d(0,0,1,-30deg);
-webkit-transform: rotate3d(1, 0, 0, -55deg) rotate3d(0, 0, 1, -30deg);
}
.stacked-images img:nth-of-type(1) {
z-index: 100;
top: 0;
}
.stacked-images img:nth-of-type(2) {
z-index: 90;
top: 80px;
}
.stacked-images img:nth-of-type(3) {
z-index: 80;
top: 160px;
}
.stacked-images img:hover {
transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
-webkit-transform: rotate3d(0, 0, 0, 0) scale(1.1,1.1);
opacity: 1;
z-index: 101;
}
Have you tried prefixfree by Lea Verou?
Try this in the HTML head:
<script src="http://leaverou.github.com/prefixfree/prefixfree.min.js"></script>
I face an issue when I apply font family for my Text component as the image below
As you can see, my text cannot align center itself (red area is my default Text component, without any margin or padding).
I think this issue comes from my font (TradeGothicLTStd-BdCn2) because when I change the font, I don't see this issue anymore.
Here is my style for this component
dropdownCurrentText: {
fontFamily: Fonts.type.TradeGothicLTStdBold,
fontSize: 14,
justifyContent: 'center',
textAlign: 'center',
color: Colors.black,
letterSpacing: 0.2
},
Does any suggestion to resolve this within keeping above font? any response would be appreciated.
P.S It's not happening on Android platform, only iOS
Finally, I find out the solution for my issue, thank for another answer.
That is using Font Tool for XCode, you guys can read this article for more detail https://medium.com/#martin_adamko/consistent-font-line-height-rendering-42068cc2957d
If you don't want to have to play with margin/padding values, you can define the text box as an inline-block element, give it a relative position and adjust the top/bottom value(s) accordingly to center it as you wish:
div {
align-items: center;
border: 1px solid gray;
display: flex;
height: 40px;
width: 200px;
}
span {
background: red;
display: inline-block;
position: relative;
top: 2px;
left: 10px;
}
<div>
<span>SELECT</span>
</div>
You can try adding this property to particular element : vertical-align: middle
I have customized the Popup css to have it in fixed position and horizontally aligned in the center of the screen. It displays correctly in Android device, but way of in iOS. Below is the css I have and the screenshot for iOS and Android. How can I fix the issue in iOS?
.credit-deny-popup .popup {
position: fixed;
top: 60px;
margin-left:auto;
margin-right:auto;
width: 250px;
height: 250px;
}
.credit-deny-popup .popup-title {
font-weight: bold;
font-size: larger;
color: #FFFFFF;
}
.credit-deny-popup .popup-head {
background-color: #387EF5;
}
iOS Screenshot
Android Screenshot
Thank you in advance!
As suggested by #DaDanny in https://forum.ionicframework.com/t/ionic-popup-position/111102/4 fixed the issue. I had to add left and right in the css as well.
.credit-deny-popup .popup {
position: fixed;
top: 60px;
margin-left:auto;
margin-right:auto;
left: 0;
right: 0;
width: 250px;
height: 250px;
}
I am having a problem with a kickstarter video that I am embedding. It works fine on everything except iOS devices. The iframe container is the correct size but when the video plays it is scaled down by about 25%.
I have done some research and tried fixing it but nothing is working for me. It appears as if it is a CSS conflict.
Here is a screenshot from my iPad:
http://louisreed.co.uk/tiddlybot/screenshot.png
HTML:
<div class="video-container">
<div class="embed-container">
<iframe src="https://www.kickstarter.com/projects/1320310506/tiddlybot-fun-and-simple-raspberry-pi-robot/widget/video.html" frameborder="0" scrolling="no"> </iframe>
</div>
</div>
CSS:
.video-container {
width: 75%;
margin: 0px auto;
}
.embed-container {
height: 0;
width: 100%;
padding-bottom: 56.25%;
overflow: hidden;
position: relative;
}
.embed-container iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
Any help or suggestions are welcome, cheers!