I need help please, I've created a website using React it renders fine on desktop and android but I get white screen on IOS. below is my package.json (website is live if anyone wants to inspect)
https://metavix.io
thank you.
I did inspect the website on IOS and there was no issues nor warnings.
Issue resolved by removing mix-blend-mode: overlay; from the main background CSS.
.App {
background-image: url(data:image/png;base64,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);
mix-blend-mode: overlay;
background-color: var(--appColor);
display: flex;
flex-direction: column;
gap: 6rem;
overflow: hidden;
}
Related
I found a number of issues with the POSITION:FIXED property on iOS Mobile. But it didnt resolved my issue. In desktops and in Android devices, works perfectly. Even in MacBook Air also.
ISSUE:
I have a position:fixed header, and a position:relative content (using padding-top:height-of-header for alignment). When i scroll fast, it starts scroll and then suddenly, it jumps back to the top of the page. But this issue is not showing when we scroll slowly.
This is the code for header
.site-header {
position: fixed;
width: 100%;
top: 0;
z-index: 9999;
}
this is the code for main-content
.main-content {
padding-top: 80px;
position:relative;
}
Tried with -webkit-overflow-scrolling: touch; , transform: translate3d(0,0,0);.
Its an e-commerce website, developed in SHOPIFY.
the issue was, in shopify, there were some third party applications (that's how they used to call plugins) are used. so, somehow jQuery plugins got conflicts and once i remove the plugin, issue got resolved. i don't know how jQuery effects my css code. but it got resolved when i remove/update the library.
I am building a cordova app that draws video on a html5 canvas and additional canvas layers on top of the video canvas to become a touch screen interface and do specific actions depending on where you touched on the top canvas layer. It works well as a Web Application and as a cordova Android App but has issues with cordova iOS iPad OS 10.3
The issue is that as a cordova ios app on my iPad the html5 video element gets drawn on top of all other canvas layers and displays video controls. If I minimize the video, I can then see all the other canvas layers drawn correctly underneath. I think this is an iOS OS issue.
I have tried many different css solutions found on various forums, but have not gotten any successful results.
Many of the css I tried :
video::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls-enclosure{
display: none!important;
-webkit-appearance: none;
}
video::-webkit-media-controls {
display:none !important;
-webkit-appearance: none;
}
.video-background::-webkit-media-controls-panel,
.video-background::-webkit-media-controls-start-playback-button {
display: none !important;
-webkit-appearance: none;
}
I even tested the example code on developer.apple.com
https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/HTML-canvas-guide/PuttingVideoonCanvas/PuttingVideoonCanvas.html
And that does not work either when building and testing the cordova ios app on my iPad.
Anyone have any suggestions on how to fix this problem?
I'm trying to create a simple mobile nav menu. It looks fine on desktop Chrome, but I have noticed a couple of issues on my iPhone 6 Plus:
Safari: When tapping the hamburger to open the menu, the cross is moving when it should be in the same place as the hamburger.
Chrome: Above issue isn't present, however I have noticed an intermittent issue where the hamburger/cross get mixed up and show at the wrong time (eg: cross showing when menu closed).
I presume I've done something fundamentally wrong here - can anyone please help? :)
Codepen: https://codepen.io/sad_muso/pen/pbkLNW
I presume it may be related to this CSS that is applied when menu is open:
ul.topnav.responsive li a {
position: relative;
display: block;
text-align: center;
margin-top: 10px;
padding: 10px 5px;
}
Thanks
I've been struggling with this for a couple of hours for now, I've tried every solution that could find on the web, but nothing works.
Here is the a css file:
body{
background-image: url('/img/login-background-small.png');
background-size: 100% 100%;
background-position: 100% 100%;
}
On the livePreview in Chrome on Mac everything is showing well but when I build iOS app, simulation is not showing any image in the background.
I've tried different picture sizes, tried moving css files after and before html tag, tried removing leading / sign from image path, but nothing seems to help.
Is there an alternative way of setting background image?
Hope someone is able to help.
Try background-position: 0px 0px;.
The setting you had now, placed the image in a way that the left top-corner appears in the bottom right corner.
I am developing application for BB10 webworks. How I can remove webview bounce effect on blackberry 10 webworks application? I had tried using meta tag in index.html and adding preferences tag for webviewbounce effect in config.xml but none of them worked for me. I am not using BBui.js in my application so I can't use its tags to disable scroll.
thanks... <:)
Got solved my issue using very simple css applied to my index.html as below:
html, body{ height: 100%; width: 100%; padding: 0px; margin:0px;}
No need of any meta or preference tags in index.html and config.xml respectively.