I'm working on a WebRTC UI that shows the user's video in a small element located in front of the video of the person to whom the user is speaking.
Here's a working codepen:
https://codepen.io/VikR/pen/GXoXRp
CSS
#pipContainer {
position: relative;
top: 0;
left: 0;
width: 250px;
}
#otherCallerVideo {
position: relative;
top: 0;
left: 0;
width: 100%;
}
#myVideo {
width: 30%;
position: absolute;
bottom: 0;
right: 0;
transform: rotateY(-180deg);
z-index: 1000;
}
HTML
<p id="status">Loading room information...</p>
<div id="start">
<button onclick="start(event)">Start</button><br/>
</div>
<div id="pipContainer">
<video id="otherCallerVideo" playsInline="true" autoPlay></video>
<video id="myVideo" playsInline="true" autoPlay muted></video>
</div>
This works fine in Chrome and Firefox, but Safari OS X and IOS, don't seem to permit it. The user's video disappears. I've tried a lot of different ways, using z-index and different kinds of positioning, but I haven't yet found a way to get this to work in Safari.
Is it possible to do this in Safari?
I got this working. Here's an updated CodePen.
https://codepen.io/VikR/pen/Wgwwoa
The key was putting this overflow code in the video container:
#pipContainer {
position: relative;
width: 300px;
height: 300px;
border: 5px solid black;
overflow: scroll;
-webkit-overflow-scrolling: touch;
}
This was a tough one to track down. Googling "safari z-index video elements" reveals many people having difficulty with this with posts from 2011 to 2018 coming up on the first page of results. Many of the fixes that work in other cases didn't seem to work in this case, possibly because I am overlaying one video element on top of another. The fix that worked was found here.
Note 1: overflow: 'hidden' also works, and has the added benefit of hiding the scrollbars.
Note 2: I have the impression that it may not be possible to change the video dimensions via javascript. In my app I currently set them on the HTML render by reference to screen.height.
Related
I have an iframe inside a popup for some reason in mobile safari once the iframe loads it's changing the size of the iframe to go beyond the screen dimensions and no matter what I do in inspector the computed style won't update.
The style that inspector shows is taking effect is (and works everywhere else including android):
.gc-lightbox > iframe {
background-color: #FFF;
height: 645px;
width: 900px;
position: relative;
border: 4px solid rgba(255, 255, 255, 0.5);
max-height: 90%;
max-width: 90%;
overflow: hidden;
border: none;
}
However, in mobile safari the "computed height" and "computed width" are way off (depending on which popup you initiate) they're up as high as 3000px tall and 700px wide. Inspector does not have the height: 900px or the max-height: 90% crossed out and even if I put style="width: 300px !important; height: 300px !important" directly on the iframe tag the computed values are still going past these values with no indication as to why.
Any clues?
Click on any of the campus tour links (as I said, it works as expected everywhere but mobile safari - even android)
http://www.georgiancollege.ca/new-campus-tours/
In one of my projects, Safari Computed Rules were not matching the Styles Rules. And like, you even adding !important directly to the inline style did not help.
The culprit turned out to be too many transition effects on the page. The transitions were on inputs and textareas (which we manipulated a lot with JS). Changing to this helped me out.
transition: none;
I have two containers which are positioned absolutely one below the other like so:
<header>
<div class="vcenter">
...
</div>
</header>
<div id="wrapper">
...
</div>
CSS:
header {
position: absolute;
top: 0;
height: 70%;
}
.vcenter {
position: relative;
margin-top: -50px;
top: 50%;
}
#wrapper {
position: absolute;
width: 100%;
top: 70%;
}
I'm centering .vcenter vertically with relative positioning. This works fine in all major browsers. Only on IOS Safari on the Ipad it's bugging. Check out the site I'm working on. .vcenter is the container of the logo.
I'm inspecting it through Xcodes IOS-Simulator and also checked on an real Ipad. Is this possibly an IOS Safari Bug? Does somebody have a workaround? I want to keep my header dynamically resizing vertically (height: 70%)...
Thanks in advance for your thoughts.
Desktop Screenshot (how it should be):
IOS-Simulator Ipad Screenshot (how it should't be):
I can't really explain it, but using position: absolute seems to fix your problem:
.vcenter {
position: absolute;
margin-top: -50px;
top: 50%;
width: 100%; /* needed to add to fix horizontal positioning */
}
I think it has something to do with using absolute positioning and percentages on the header. If you inspect the height of the html & body, they aren't actually as tall as your content - so maybe computing a 50% positioning for the vcenter is getting messed up. Not sure...
Have you tried using the transform solution? It generally covers your bases for things like iOS rendering issues (of which there are several more than just this scenario).
Write your class like this (it'll break for IE9 and below, but that's what browser shimming is for and you can use your existing code for the shim using Modernizr)
.vcenter {
position: relative;
top: 50%;
transform: translateY(-50%);
}
That should render .vcenter at the vertical center for all modern browsers as well as iOS Safari.
The logo on my friends website is working properly in all browsers yet when I open up my iPhone or iPad (actual devices) it's all wonky.
<img class="averylogo" src="<?php bloginfo('template_directory') ?>/img/HEADER-AveryLawOffice-LOGO.png" alt="Avery Law Office">
It's not placed in any containing div. Just on it's own.
CSS
.averylogo { position: absolute; width:360px; left: 50%; margin-left: -180px; z-index: 2; }
I'm not quite sure why it works everywhere else but doesn't center on my iPad or iPhone properly.
This is what it's looking like, but only on the iOS.
What am I doing wrong?
Give #main-navigation position:relative; otherwise the logo is positioned relative to the body, which is resized on your smaller device.
Chris Coyier has an article about it.
Use margin-left: auto and remove left: 50%.
You may want to add text-align: center to #main-navigation for IE.
I have two absolutely positioned adjacent elements that share the same background color. They appear to be one single element on my desktop and laptop, but there's a plainly visible "border" of sorts - a sliver of translucent color - between the two elements when viewed on the iPad.
If I had to guess I'd say it's due to the different method by which vector objects are drawn in the browser in iOS, but that's just a guess based on some vague information I heard in a talk once.
Here's an entire sample page that can show the issue if you can run it on an iPad:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<style type="text/css">
#container {
position: relative;
width: 200px;
height: 40px;
background-color: transparent;
}
#left {
position: absolute;
top: 0;
left: 0;
width: 50px;
height: 40px;
background-color: red;
}
#right {
position: absolute;
top: 0;
left: 50px;
width: 150px;
height: 40px;
background-color: red;
}
</style>
</head>
<body>
<div id="container">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>
The problem only occurs if Safari is scaling the page.
Safari scales elements individually, often resulting in each element having a 1-pixel-wide translucent edge on one or more sides. Then when the scaled elements are placed side by side, the overlapping translucent edges are still not 100% opaque, so some of the background leaks through.
The problem isn't limited to absolutely-positioned elements; it applies to all adjacent elements (except images, it seems).
For instance, if a table is styled with td { background-color:black } there will sometimes be subpixel slivers of background showing between the table cells. Even two adjacent spans exhibit the problem.
My solution is to restructure the page so that adjacent elements of the same color are wrapped in a container, and the background is applied to the container. This is a lot of work. In your case, a quick fix would be to overlap the divs by 1 pixel.
I do consider this to be an iPad bug. None of my Windows browsers (including Safari) have this problem when zooming a page.
I have a that contains two nested div's. One of the nested div's contains a javascript graph.
When the page renders, the javascript graph is at an incorrect location, outside of the 's area. Does anyone know what I am doing wrong?
Here are the css:
#graph_container{
width: 75%;
margin: 0 auto;
background-color: #FFF;
padding: 20px 40px;
border: solid 1px black;
margin-top: 20px;
}
#graph{
width: 75%;
margin-top: 20px;
}
#car_select{
width: 25%;
margin: 0;
background-color: #FFF;
}
And Rails.ERB file
<div id="graph_container">
<div id="car_select">
# this part is at the correct location...
</div>
<div id = "graph">
# this is showing up outside of graph_container
<script type="text/javascript" language="javascript">
//<![CDATA[
var chart = new AnyChart('/AnyChart.swf');
chart.width = 500;
chart.height = 500;
chart.setXMLFile('car_info.xml');
chart.write();
//]]>
</script>
</div>
</div>
You can get the <div>s in the right place with 2 fixes:
Float them left and right respectively.
Add a clearing element below them so they stay inside the #graph_container.
You can see it in action here.
If that doesn't work, your Javascript may be setting the position on the graph it creates to absolute. In this case, add position: relative; to your #graph container. This will cause any absolutely positioned children (i.e. the graph) to use it, rather than the document, as its coordinate system.
Have you tried making the positioning absolute?
http://cssdesk.com/EUYhZ
Pat and Danny's suggestions were valid and important for the output. But neither fixed my problem, what turned out to be the issue was actually the Javascript code. I didn't set where the code was suppose to be inserted.
Simply placing within the element I wanted DID NOT work. In my case, what I needed to do was fill in chart.write() with chart.write('graph'), so that the script would insert itself in the part of the html.