Border problems in chrome - css

I'm having a problem with a fixed border around a responsively sized div. This issue only happens in Chrome.
I'm having a hard time reproducing it in JSFiddle, but I'm essentially trying to center a div within another (which is placed somewhere on my page) and the centered-div has a nice 1px border around it. The LESS for these two elements are as follows:
.popup {
display: inline-block;
height: 93%; width: 30%;
margin-right: 7%;
margin-left: -3%;
position: relative;
.text {
box-sizing: border-box;
width: 100%; height: 50%;
border: 1px solid black;
padding: 0 5%;
position: absolute;
top: 50%; left: 50%;
.translate(-50%, -50%); # Some LESS that is just a translate call
color: black;
font-size: 18px;
}
}
This is what I see, which changes as the screen size changes (sometimes correct, sometimes different borders are missing/incorrect):
EDIT: Added relevant HTML.
<div class="container">
...Other stuff...
<div class="content">
...Other stuff...
<div class="breakdown">
<div class="block">C++ (Circle dials you see)</div>
<div class="popup">
<div class="text">Some text here to go in the popup</div>
</div>
<div class="block">Java (Next dial)</div>
<div class="popup">
<div class="text">Some text here to go in the popup for the Java dial</div>
</div>
</div>
</div>
</div>
There's more stuff in container, and more stuff in content in the DOM levels shown. However, the other items in container are each in their own block on the page (no overlap), and so is the items in content. A breakdown div holds the dials and popups that you can see in the screenshots. The idea is that when i hover over a "block" or a dial the popup shows up to the right, shoving the next dial over when shown.

I've observed such issues with borders when I have zoomed the page - that would explain why you see it only in Chrome and only on one domain (you said you cannot reproduce it in JSFiddle).
Click Ctrl+0 or check if you have an icon in the addressbar of a magnifying glass (it's displayed when the zoom level is different from 100%).

Related

MacOS Chrome horizontal scrollbar not disappearing

I am developing an application with a few components that are scrollable horizontally. I've come across some unwanted behaviour where the horizontal scrollbar does not disappear leaving an ugly long white scrollbar.
My 'show scroll bars' setting on MacOS is set to 'Automatically based on mouse or trackpad'. My chrome is Version 72.0.3626.121 (Official Build) (64-bit).
The issue can be reproduced in the snippet below.
#horizontal {
width: 100%;
height: 150px;
overflow-x: scroll;
overflow-y: hidden;
flex-direction: row;
border: 2px solid purple;
display: flex;
}
#vertical {
width: 300px;
height: 300px;
overflow-x: hidden;
overflow-y: scroll;
flex-direction: column;
border: 2px solid purple;
display: flex;
}
.horizontal-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: pink;
display: flex;
}
.vertical-item {
min-width: 100px;
width: 100px;
min-height: 100px;
height: 100px;
margin-right: 24px;
margin-bottom: 24px;
background-color: red;
display: flex;
}
<div id="horizontal">
<div class="horizontal-item">1</div>
<div class="horizontal-item">2</div>
<div class="horizontal-item">3</div>
<div class="horizontal-item">4</div>
<div class="horizontal-item">5</div>
<div class="horizontal-item">6</div>
<div class="horizontal-item">7</div>
<div class="horizontal-item">8</div>
<div class="horizontal-item">9</div>
<div class="horizontal-item">10</div>
<div class="horizontal-item">11</div>
<div class="horizontal-item">12</div>
<div class="horizontal-item">13</div>
<div class="horizontal-item">14</div>
<div class="horizontal-item">15</div>
<div class="horizontal-item">16</div>
<div class="horizontal-item">17</div>
<div class="horizontal-item">18</div>
<div class="horizontal-item">19</div>
<div class="horizontal-item">20</div>
</div>
<div id="vertical">
<div class="vertical-item">1</div>
<div class="vertical-item">2</div>
<div class="vertical-item">3</div>
<div class="vertical-item">4</div>
<div class="vertical-item">5</div>
<div class="vertical-item">6</div>
<div class="vertical-item">7</div>
<div class="vertical-item">8</div>
<div class="vertical-item">9</div>
<div class="vertical-item">10</div>
<div class="vertical-item">11</div>
<div class="vertical-item">12</div>
<div class="vertical-item">13</div>
<div class="vertical-item">14</div>
<div class="vertical-item">15</div>
<div class="vertical-item">16</div>
<div class="vertical-item">17</div>
<div class="vertical-item">18</div>
<div class="vertical-item">19</div>
<div class="vertical-item">20</div>
</div>
The problem occurs when you hover over the bottom of the horizontal scrollable area (so where the scrollbar will appear, the purple bottom of the container with pink squares). The scrollbar will appear and never leave again. The same does not happen with the vertical scrollable area, where the scrollbar also appears but does disappear. If you scroll the scrollbar before hovering over the bottom then afterwards said problem won't occur if you hover over where the scrollbar would appear.
In the image below I hovered over the bottom of the horizontal scrollable area and it shows the scrollbar is there (and it does not leave afterwards!).
This problem infact also occurs when I hover over the horizontal scrollbar from a stackoverflow code block, making text hardly readable.
Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text Long line of text
It will look like this and the scrollbar wont disappear anymore much like in my own case:
I'm assuming this is a bug in Chrome with MacOS but I was hoping there may be some CSS tricks I can do to solve this problem.
This is Chrome issue: https://bugs.chromium.org/p/chromium/issues/detail?id=914844#c36
Many people are adding white space of scrollbar size (25px) to prevent scrollbar from obscuring content.
It is workaround and can be considered only as a temporary solution though.
From the ticket, they give a workaround until the issue is fixed:
Go into your System Preferences > General
Select Always:
We have been having this issue in our Macs with same OS version, same chrome versions. The final conclusions we got are the following:
the ones using the Apple Original mouse and trackpad are able to see all normal.
When we connect to the same computer one standard USB mouse, after reload the web we suddenly got the annoying scrollbars.
It was tested and same happened in 3 different MacBook Pro.
I upload a video here what happens when I plug out and in: https://youtu.be/AGTF2Ltuxnk
EDIT
Our custom solution was prevent default scroll bars and set up our own scroll bars that will only be displayed when neededneeded.
::-webkit-scrollbar-track {
display: none;
border-color: transparent;
background-color:transparent;
}
::-webkit-scrollbar * {
background:transparent;
}
::-webkit-scrollbar {
width:rem(7);
min-width:rem(7);
height:rem(7);
min-height:rem(7);
}
::-webkit-scrollbar-corner {
background-color:transparent;
}
::-webkit-scrollbar-thumb {
border-radius:rem(10);
background-color:#666;
-webkit-box-shadow: inset 0 0 0 ;
}

How to make HTML Video Background with Text Overlay responsive

I can't make my Background Video with overlay & Text responsive.
Decrease Resolution width the text does not scale down, but gets cut off by the overflow hide option i believe.
Does not help if i remove the font size parameter
Also, if i try on Safari the Video does not minimize well or at all
result is, that page is cut off on the right side.
The idea is www.fc-squad.de the picture in the middle should be replaced by a video. While the page is not really responsible, its ok with Pictures only.
p.S: probably i messed up alot code, by trial and error paste code, delete if result wasnt good
/* ViDEO Background Section */
.callout {
position: relative;
overflow: hidden;
margin: 20px 20px 20px 20px;
min-width=600px:
}
/* Style of the the video */
#myVideo {
height: auto;
width: auto;
vertical-align: middle;
width: 100%;
height: 100%;
border: 1px solid slategrey;
border-radius: 5px;
display:inline-block;
overflow: hidden;
z-index: -1000;
}
/* some content over the video */
.content {
position: absolute;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
color: #f1f1f1;
width: 100%;
height: 100%;
vertical-align: middle;
text-align:center;
align-items: center;
justify-content: center;
text-shadow: 0px 0px 3px #272D0B;
}
<section class="callout">
<!-- The video -->
<video autoplay muted loop id="myVideo">
<source src="squad-alpha11.mp4" type="video/mp4">
</video>
<!-- some overlay text to describe the video --!>
<div class="content">
<span style="font-size:36px"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:28px"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:20px"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:18px"><h4>TEXT TEXT TEXT</h4>
<a class="button" href="url-to-topic">Call to Action</a>
</div>
</section>
Update:
Great, Text is working much better
small and larger window (Firefox), see here video container small resolution and video container medium resolution
But The Video and the whole DIV Section has issues on Safari/iOS... yes the page is generally not optimized, but it was rendering pictures down alteast
But the video is cut off, not playing auto (you must klick play)and text is below not as overlay. Safari screen
I've read its better to make a static picure for small screens, or is there an easy fix for Safari?
If the issue is just the text not resizing you may want to try use vw instead of px, that scales down based on view width.
replace your text spans with:
<span style="font-size:4vw"><h1>TEXT TEXT TEXT</h1>
<span style="font-size:3.2vw"><h2>TEXT TEXT TEXT</h2>
<span style="font-size:2.2vw"><h3>TEXT TEXT TEXT</h3>
<span style="font-size:1.7vw"><h4>TEXT TEXT TEXT</h4>
let me know cause i didn't understand if also the video itself has issues.
used update for information - for better searchability
Text scales now on small resolution
works also on medium
But still issue on Safari
Safari Cut of Video

Image Overlay Using Z-Index But Cannot See Elements Beneath

I'm trying to accomplish the following where I have some text on the left side of the page and an graphic on the right hand side.
https://i.stack.imgur.com/K5jAy.png
I'm using Bootstrap 4 and everything has been going well so far. However, when trying to incorporate the graphic into the site, I am running into two problems:
I always want the graphic to be positioned the same way no matter what screen size the website is being displayed on. Currently I am setting the graphic's width to 75%. When I preview on a smaller screen, the graphic is not even visible because the width is so small in regards to the width of the viewport. I am using absolute positioning, but this seems to change depending on the screen size.
When previewed on a larger monitor, the graphic displays on-top of my text. Now, I didn't think this would be a problem. I've saved my graphic as a png to allow for transparency and I've given my graphic a higher z-index than my text elements. However, the graphic seems to be like a block and covering my text elements, as seen here.
https://i.stack.imgur.com/wk5QX.png
Do you have any suggestions on how to fix either issue?
HTML:
<section class="header">
<div class="container-fluid p-4">
<img class="logo" width="52" height="57" src="img/BraydonCoyerLogoIcon.png" alt="Personal Logo">
<img src="img/decoration1.png" alt="Colorful Decorations" class="decoration">
</div>
<div class="container mt-5">
<div class="greeting">
<div>
<h1>Hi,</h1>
<h1>Some <span class="highlight">Text</span></h1>
<hr align="left"/>
</div>
</div>
</div>
CSS:
* {
background-color: #262628;
color: #eaeaea;
font-family: "Varela Round", Helvetica, Arial;
}
.greeting {
margin-top: 10em;
}
.greeting h1 {
font-size: 100px;
}
.highlight {
color: #f99e46;
}
.slogan {
font-size: 20px;
}
hr {
background-color: white;
width: 50%;
}
.decoration {
width: 75%;
position: absolute;
z-index: initial;
top: -150px;
left: 520px;
}
Try to use percentage for left position: left: 50%
Looks like your decoration image inherits background-color: #262628; from wildcard selector

Border-radius not rendering in Chrome on retina display

I've encountered strange behaviour while building a circular progress indicator. After trying to isolate the bug I'm out of clues why the border-radius isn't rendered in Chrome on retina displays.
I've got a div which renders a circle and some inner content which is positioned absolute:
.circle {
position: relative;
width: 100px;
height: 100px;
border-radius: 50%;
overflow: hidden;
}
.inner {
position: absolute;
left:0;
top:0;
width: 100px;
height: 100px;
background: red;
}
Of course this renders just fine.
However, by adding a few surrounding div's it starts to show a rectangle instead of a circle.
<div style="height: 300px"> <!-- to render scrollbar -->
<div style="position: fixed"></div>
<div style="position: relative"></div>
<div class="circle">
<div class="inner"></div>
</div>
</div>
The isolated issue: https://codepen.io/sanderdejong/pen/qmrXjq
Things which turn the rectangle into a circle again:
Lower the height of the top div so it won't render a scrollbar
Scroll the page so that the rectangle is partially out of bounds
Drag the browser window to a non-retina monitor
Remove the position relative or fixed from one of the sibling div's
I'm not sure how I can isolate the issue even further and if it is explainable why this happens. I also tried Firefox and Safari but both work correctly.

Creating disable opacity bootstrap 3?

I am using bootstrap 3, with panel i need to create inside body of the panel opacity that user can not click on link, here is my working fiddle
http://jsfiddle.net/52VtD/9230/
The problem is that opacity always get full screen i need to be only in panel body?
I need to make that only with css, is that possible?
Here is my code so far
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Panel title</h3>
</div>
<div class="panel-body">
I dont want allow user to clikc on this link
</div>
</div>
CSS
.panel-body:before{
position: fixed;
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
background: rgba(0,0,0,0.8);
}
UPDATE
I have find out better solution
.panel-body{
opacity: .7;
pointer-events: none;
}
The way I've done this in the past is by making the container (i.e. the thing you want to lay your transparent cover over) have position:relative then create a div within that container with height:100% and position:absolute. This then covers the whole of the parent div. Here's a full working example.
HTML
<div class="container">
<p>Ahoy, I'm some text</p>
<p>And I'm a link!</p>
<img src="http://placehold.it/100" alt="I'm an image"/>
<div class="cover"></div>
</div>
CSS
.container{
position:relative;
border:2px solid #663399;
padding:5px;
}
.cover {
background-color: #fff;
height: 100%;
left: 0;
opacity: 0.9;
position: absolute;
top: 0;
width: 100%;
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=90); /*Yay for old IE support...*/
}
jsFiddle working example
By just using a semi transparent div covering the elements within them instantly makes them non-clickable, so no need to mess around with pointer-events, but it does require you have a relatively positioned container div.

Resources