Gray square effect when pressing a HTML element on IPhone - html

On the following code I have the Ionic 4 component: Range.
JSFiddle source:
https://jsfiddle.net/681539w0/
Direct result:
https://jsfiddle.net/681539w0/embedded/result/
Inline demo:
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>index-ionic.html</title>
<script src="https://unpkg.com/#ionic/core#latest/dist/ionic.js"></script>
</head>
<body>
<ion-range mode="ios" min="0" max="120" pin="true" value="60"></ion-range>
</body>
</html>
In desktop browsers it is fine. Also, on Android browsers it is fine.
But on IPhone (real device) browser (for example: Chrome), when you press the handler, there is one gray square that shows up as you can see on the following image:
I want to prevent that because it doesn't look good.
In the other hand, if you go to this demo:
https://beta.ionicframework.com/docs/content/component-preview-app/docs-www/?ionic:mode=ios&ionic:statusbarPadding=true#/range
and press the handlers you don't get that gray square.
Any idea on how to prevent this?
Thanks!

Set the -webkit-tap-highlight-color CSS property to transparent, like so:
html {
-webkit-tap-highlight-color: transparent;
}

Related

I have a transparent image to use in my html code in vscode but when I open it with live server the image doesn't get transparent

please help me in understanding my error of the code, in why the transparent images with .png extension are not getting transparent.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>First Page</title>
</head>
<body>
<h1>IMAGES:</h1>
<br>
<p><b>1</b></p><br>
<img src="https://www.pinpng.com/pngs/m/77-779483_anime-guy-wolf-deity-anime-pics-cute-boys.png" alt="Image not found">
</body>
</html>
The image isn't with a transparent background. It's with a 'transparent' grid background, so it looks/fakes like it's transparent but it isn't.
You have downloaded the file on the display page. This is a JPEG file with a .png extension.
If you press the Free Download button you get a PNG with transparency

How do I change textbox size using css? And how do I connect my css file with my html file

I want to change my textbox size using HTML, for now I only have this as my
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-color: grey;
}
</style>
</head>
<body>
<label>Enter your question:</label><br>
<input type="text" id="myquestion" placeholder="Your question here"><br>
<button type="button" id="mybutton">Submit</button>
<script src="script.js"></script>
</body>
</html>
First of all, how do I connect my css file with my HTML file? my css file name is style.css
Second, how do I change <input type="text" id="myquestion" placeholder="Your question here"><br> size using css? I kinda wanna at least use css because for now I know nothing about css. It'll be really good if you guys can help me. Thanks!
You can load your CSS file in your HTML page by adding the following line within the <head> tag:
<link rel="stylesheet" href="style.css">
When you say you want to change the size of the input, I assume you mean you want to change its width. You can do this using:
#myquestion {
width: 400px;
}
To learn about HTML and CSS, I highly recommend going through W3Schools.

How to fix "2.4.7 Focus Visible" Element not highlighted in mac machine

It gives me "2.4.7 Focus Visible" AA error in Mac when I check my site with siteimprove chrome extension. Some times it works fine in windows systems some times it's not.
Here is my code.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="/js/lib/dummy.js"></script>
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
a#login-as-guest:focus{ background-color: yellow; }
a#login-as-guest-active:active{ background-color: yellow; }
</style>
<!-- TODO: Missing CoffeeScript 2 -->
<script type="text/javascript">
window.onload=function(){
}
</script>
</head>
<body>
<a tabindex="0" id="login-as-guest">Cancel and browse as guest</a>
<br />
<a id="login-as-guest-active">Active Cancel and browse as guest</a>
<script>
// tell the embed parent frame the height of the content
if (window.parent && window.parent.parent){
window.parent.parent.postMessage(["resultsFrame", {
height: document.body.getBoundingClientRect().height,
slug: "t2hbS"
}], "*")
}
</script>
</body>
</html>
It's already running in my server "https://myappdemo.com/focus/test.html"
Please help me thanks in advance.
Your code sample just changes the focus background color and your demo link just sets the focus text color. A typical focus indicator is an outline border, which is provided by default by most (all?) browsers, but your color changes are sufficient to show a focus too. In fact, since you are only changing :focus{background-color} and a{color}, respectively in the two examples, you will get your color change and the browser's default focus border.
I don't see why siteimprove is flagging it. Can you post the error siteimprove is claiming and all relevant info it's complaining about?
Make sure that user interface elements, that can receive keyboard focus, are highlighted on focus.
a:hover, a:active, a:focus {
text-decoration: underline;
color: green;
}

Safari - Iframes causing flicker on page change

I am moving a navigable site into an iframe that now has other frames surrounding it.
Everything works normally however now in Safari when a link is clicked in the main iframe the iframe goes blank momentarily then the pages loads. Usually the user would only notice changes in elements that have changed. So the main site template would appear to have not been reloaded.
This is how the site used to behave outside the iframe and in Firefox it behaves that way despite now being in an iframe.
Is there any way to stop Safari re-loading the entire page from scratch each time a link is clicked in the iframe?
The answer has been tested and is completely serious, be warned!
So the Safari white flicker only occurs when a Javascript file is called in the head or the body, and from the same domain.
So you can include Javascript files in the head as normal from an external domain and no flicker, change it to your own domain and it flickers.
To get even more weird if you include the local javascript files in the body there is a lesser flicker, after the body it completely goes away.
This must be a bug!
Below is a basic example, clicking the link causes the flicker.
Test page HTML:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="shortcut icon" href="inzu.ico" >
<meta charset="UTF-8">
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<iframe id="iframe" src="testframe.html" style="height:600px"/>
</body>
</html>
Frame with flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<script src="/something.js" type="text/javascript"></script>
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
</html>
Frame with no flicker:
<!DOCTYPE>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8">
<style>
body{
background:red;
}
</style>
</head>
<body>
TEST
</body>
<script src="/something.js" type="text/javascript"></script>
</html>

How to use adobe edge animations in website?

I want use adobe edge animation in my website . I add required files into page head .Adobe edge worked with this div tag only
<div id="Stage" class="EDGE-7942973"> </div>
and add another elements dynamically into it .I test and understand that if this div tag placed into another tags animations don't run. . How to fix this problem?
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>
<title>Untitled</title>
<!--Adobe Edge Runtime-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<script type="text/javascript" charset="utf-8" src="advertisement_anim_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-7942973 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
</head>
<body style="margin:0;padding:0;">
<div id="Stage" class="EDGE-7942973">
</div>
</body>
</html>
Keep adobe edge published files in a folder folder_name and place following tag in your html file whatever you want. Don't forget to change folder_name & file_name.
<iframe src="folder_name/file_name.html"></iframe>
Set height & width of iframe according to stage size.