I have a mobile site with fancybox popups
I'm having problems with close button:
<a title="Close" class="fancybox-item fancybox-close" href="javascript:void(0);" id="fancyboxCloseButton"><i class="icon-remove"></i></a>
On Nexus 7 tablet with Android 4.4.4 I see the close button (X) with green color:
.fancybox-close {
position: absolute;
top: .5%;
right: 2%;
display: block;
cursor: pointer;
z-index: 8040;
background: none!important;
font-size: 150%;
color: #afd732!important;
text-decoration: none;
}
But on Samsung tablet with Android 3.1 I see green holo square.
Since it impossible to debug Android 3.1 browser.
Any ideas what it can be?
It was a font issue. Android none Chrome browser doesn't support .woff font.
I added svg font and that solved the problem.
The fancybox works fine in Android browser.
Related
So here is the problem I am facing: the website layout in my phone doesnt look the same as I saw on the browser with responsive viewport turned on.
I was looking at the similar questions posted on this forum like this (meta tag problem)
I am self-learning web development and working on a simple website of the game "paper, scissors, rock".
I draw the framework with HTML.
The paper, scissors and rock logos are svg injected by javascript so I can fill it with different color.
The svg styles are done in css.
The combat part would be done in javascript but now I am confused by the layout problem.
So what I expected from desktop(windows) google chrome is like this:
chrome app view
my firend's Android phone google chrome view:
android app view
but what I get from my iphone google chrome:
iphone app view
I think the css and javascript thing would not be a critical point because it works fine on desktop and android phone.
I think it would be a tag problem but I am not able to find answers others mentioned before.
I dont know if it is the difference between ios and android.
I have faced similar issues before. I had tried to create a circle button with purely css (not img or svg). It shows perfectly in desktop web browser and my friend's android phone. But it shows a ellipse on my iphone.
Here is the code I used to create the button:
HTML:
<button id="master-button" type="button" onclick="AddContent(this)">
<div class="button-cross"></div>
<div class="button-cross rotate"></div>
</button>
CSS:
#master-button{
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
width: 50px;
height: 50px;
border-radius: 50%;
background-color: var(--white);
border: none;
font-size: 50px;
box-shadow: 2px 2px 5px rgba(0,0,0,0.5);
}
.button-cross{
position: absolute;
top : 50%;
left: 50%;
transform: translate(-50%,-50%);
width: 5px;
height: 30px;
background-color: var(--high-light-main);
}
.rotate{
transform: translate(-50%,-50%) rotate(90deg);
}
Iphone view:
iphone app view
Android:
android app view
Desktop:
desktop app view
I thought it was caused by the different programming language by android and ios. So I thought it will only shows error if I use Safari. But it turns out even I use the same browser (google chrome), it still shows difference on the screen.
Do you guys have any thought about the issue? Do any of you have faced this issue and finally have a solution on it?
Please let me know and discuss more about it. Thank you for the community.
Happy New Year
I made a website that has a background color.
You can see the backgroung color in 3 mayor browsers in a desktop
On an IPad, in Safari and Chrome I can see the background and it's border
BUT
In my Galaxy 6, with Android 7.0 I can't see the backgrond nor the borders of the designed webpage
Thanks in advance for your help
here is the code where I have the color and borders
.main-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: baseline;
background-color: hsl(14, 100%, 53%);
align-items: baseline;
max-width: 1000px;
margin: 0 auto;
border-style: solid;
border-width: 5px;
border-color: blue;
}
There could two reasons why you can't see the background color on your Galaxy 6.
This could be down to the browser cache which may need clearing.
Hue, Saturation, and Lightness is only supported by certain browser versions.
HSL is supported on the following browsers: IE9+, Firefox, Chrome, Safari, and in Opera 10+
I've written a new post to my blog and the page looks fine in all browsers, except Chrome for Android 4.4.4 (KitKat). Update: didn't work for Android Marshmallow too.
The only different thing this particular post has is a scrollable table, styled on a custom stylesheet:
.article_body table {
width: 100%;
}
#media screen and (max-width: 479px) {
.article_body table {
width: auto;
display: block;
overflow: auto;
overflow-x: scroll;
white-space: nowrap;
border-collapse: collapse;
border-spacing: 0;
clear: both;
-webkit-overflow-scrolling:touch;
touch-action: auto;
-ms-touch-action: auto;
}
}
The table is scrollable in all browsers, except Chrome on Android. But the most important thing is that the post is showing a white block from some point on, until the end of the post, as shown on the screenshots below:
Beginning of the error
End of the error:
TESTS:
PC, Win 7 (IE 11, Chrome, Firefox) - OK
iPhone, iOS 9.3.1 (Chrome and Safari) - OK
Windows Phone (IE) - OK
Moto G - Mozilla Firefox - OK
Moto G - Google Chrome - failed (portrait only)
All the other posts within my blog are ok on all these browsers.
CSS test:
After some tests I've found out the error relies on display:block;.
If I change or remove this property, the white block disappears on Chrome, but the layout is awful in all other browsers.
What should I do to fix this?!
Blog post: http://blog.virtuacreative.com.br/upgrade-jekyll-2-to-3-gh-pages.html
Android version: Android 4.4.4; XT1032 Build/KXB21.14-L1.40
Chrome: 49.0.2623.105
I found the problem for the white area. It lies in the animate.css Change the following line;
<div class="header-color col-sm-9 col-sm-offset-3 animated fadeIn">
Into this:
<div class="header-color col-sm-9 col-sm-offset-3">
I suspect that the transition (fadein), which has a 2000px value in it, is the one causing the problem with the white space/cut off.
You can probably also multiply this value by 10 to solve this problem.
Well, thanks to #JoostS insights I managed to fix this annoying error myself with this #media query for Chrome only:
/* #media queries for Chrome 29+ only */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) and (max-width: 479px) {
.fadeIn {
display: initial;
margin-left: 5% !important;
}
article {
padding-left: 5%;
padding-right: 5%;
}
}
See https://gitlab.com/snippets/17238 for more Chrome media queries.
In the default Android Browser for older Android versions (4.1, maybe 4.2/4.3 [It is on the Android device of a customer, i'm not exactly sure which version he uses]) SVG sprites are not rendered correctly.
Instead of showing the correct clipping with the correct size, the browser shows a smaller version of the image, showing the whole sprite, like in the screenshot below (Android Browser 4.1):
Android screenshot (false rendering)
it should look like this:
Android screenshot (correct rendering)
Here's the CSS for the sprites:
.sprite {
display: inline-block;
background-image: url('img/sprite.svg');
background-repeat: no-repeat;
background-size: 1000px 1000px;
overflow: hidden;
color: transparent !important;
}
.sprite.logo {
width: 270px;
height: 55px;
background-position: 0 0;
display: block;
}
[...]
Every other Browser (including Android Browser 4.4) shows everything correctly.
This issue exists on Android 4.3- and IE9. To solve this, simply specify width and height attributes for svg tag in you file.
Does anybody know whether PhoneGap's Android browser supports CSS3 flex box?
When I run the code in browser it worked correctly but when it comes to my Android device it does not work.
Here is the code:
.di {
float:left;
width:100%;
text-align:left;
display:flex;
}
.di span {
background:url('img/smallphone.png') no-repeat;
height:15px;
border:1px solid #005522;
float:left;
width:24.2%;
text-align:center;
border-radius: 10px;
background-color:white;
flex:1
}
Actually, phonegap does not support any css.
Phonegap uses a webview, which means it uses the default browser of the device.
So the css support depends on the browser of the device, which means you will have different css behaviour with the same app if you run it on an android 2.3, 4.0, 4.1 or 4.4.
And sometimes the support may be different for a given version of android if you use different brand of device.
That's the main problem with phonegap.
That said, it seems flex box are supported since android 2.1 : http://caniuse.com/#feat=flexbox but you need to add the prefix -webkit
try this :
.di {
float:left;
width:100%;
text-align:left;
display: -webkit-flex;
display:flex;
}
.di span {
background:url('img/smallphone.png') no-repeat;
height:15px;
border:1px solid #005522;
float:left;
width:24.2%;
text-align:center;
border-radius: 10px;
background-color:white;
-webkit-flex: 1;
flex:1;
}