I've been developing a website for my FIRST robotics team. However, recently a horizontal scrollbar has appeared which seems to have no explanation. No elements protrude past the edge of the page, and it works fine in IE. I can fix it with body { overflow-x:hidden ) but I'd rather find the true culprit. Any help would be appreciated. The site is wordpress-based, and can be found here.
Here is the reason on line 22 vender-extension-style.css
try to remove this
#header-cut-out {
-moz-transform: skew(-45deg);
}
line 28 vender-extension-style.css below css on img tag
#header-cut-out img {
-moz-transform: skew(45deg);
}
your scroll will remove and you have to work on it to get the desired output.
Related
I am experiencing some weird issues with CSS scale transitions. The scaling works fine, however there are some weird lines around the scaled element, which disappear after scrolling. This happened in a Chrome browser and in Microsoft Edge. And I don't assume it has something to do with margin, padding, the z-index, colors or anything else along those lines, because it happened with and without these properties being included in the relevant CSS.
This is the relevant CSS as a quick draft:
.element {
background-color:black;
transition: transform 0.5s;
transform:scale(1, 1, 1);
}
.element:hover {
transform:scale(1.1, 1.1);
}
Here is a quick recording to demonstrate that: https://streamable.com/cyvkjm
Here is also a screenshot for those who can't see the video for some reason:
Your streamable link worked fine for me. I remember having a problem similar to that a while ago, and it was something to do with using 3d scaling
Check this out though, I'm fairly certain backface-visibility: hidden and the -webkit equivalent will fix it. As I can't reproduce this I can't be of much more help
CSS transition on element leaving lines
Edit: after reproducing the problem we found a fix. Tested and works in Chrome/Edge/Firefox. perspective(1000px) seems to work better than perspective(0)
.element {
transform: scale(1) perspective(1000px);
}
.element:hover {
transform: scale(1.1) perspective(1000px);
}
Hey guys i have this carousel for which the arrows are created entirely in CSS , see HERE.
Now the arrow has a slight error on hover i have applied the following code to the arrow circle:
CSS:
.arrow-outer-prev:hover,
.arrow-outer-prev:focus,
.arrow-outer-prev:active {
-webkit-transform: translateX(-5px);
-ms-transform: translateX(-5px);
-o-transform: translateX(-5px);
transform: translateX(-5px);
}
(The fiddle does't show the error , so i will be sharing a link).
Now on shower my intertion is to move the circle, but an error occurs and along with the circle the arrows also tilt slightly , SEE GIF.
The error can be seen on this link too HERE.
The bug looks slightly different in FF and chrome. In chrome the bug looks even more awkward though. unfortunately i have not been able to reproduce this bug , nor has debugging in chrome using dev tools worked for me.
Can somebody point out to me what am i doing wrong here ? Why is are the arrows moving when the CSS is clearly for only the circle to move ?
First of all, my working demo: http://desainwebsite.com/tunasteleshop/
My problem:
When you hover the category menu (smartphone, powerbank, etc), there should be a dropdown that show owl-carousel sub category with image (I disable the slide up function when hover out, for this debugging session). This was already working well, in Firefox, Safari, and Chrome (both Mac and Windows). BUT, when you start scrolling down, until the header become position:fixed thanks to its newly added '.stuck' class using Waypoint jQuery , in Chrome you will start to notice that the dropdown content got clipped, hidden.
From my earlier inspection, the one that caused this was CSS style overflow:hidden from its parent container. But this style is the default from the Owl Carousel jQuery and it must be used so it's impossible to change it (if removed, it will destroy the layout for this carousel).
My other finding was the position:fixed in the ".header-bottom" also has a role in this bug. When changed back to relative, it's back to normal, not clipped. BUT, the client wants the header stay position fixed as visitor scroll the website down. So I can't change this too..
My question, why in the world it's working well in Firefox and Safari but not in Chrome? What is exactly the cause of this bug? Is it CSS related? Is it jQuery related? Or purely Chrome bug (both Windows and Mac version)?
My jQuery for showing the dropdown:
$(".prodnav > li").hover(function() {
$(this).children("a").addClass("opened");
$(this).find(".subnav-area").slideDown("fast");
$(".body-mask").fadeIn("fast");
});
And my jQuery for calling the Owl Carousel:
$(".sac-owl").owlCarousel({
autoPlay: false,
items : 6,
itemsDesktop : [1199,6],
itemsDesktopSmall : [959,5],
itemsTablet: [720,4],
itemsTabletSmall : [480, 3],
itemsMobile : [320, 3],
navigation: true,
pagination: false
});
Trigger the Waypoint jquery:
$('.header-bottom').waypoint('sticky', {
offset: 0
});
Finally got a working solution.
Add transform-style:preserve-3d to Owl Carousel CSS that caused the overflow-hidden ".owl-wrapper-outer" like so:
.owl-carousel .owl-wrapper-outer{
overflow: hidden;
position: relative;
width: 100%;
-webkit-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
transform-style:preserve-3d;
}
Non of the above worked for me, after soms googling i found a article which did the trick for me: http://www.lehelmatyus.com/559/owl-carousel-fix-chrome-owl-slider
.owl-carousel .owl-item {
transform: translateZ(0);
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
}
I had a similar problem and repaired it with simple CSS:
.owl-carousel .owl-stage-outer {
overflow: inherit;
}
I have a web page built in ASP.NET MVC that uses fixed positioning to allow users to always see the row headers when scrolling.
When using Internet Explorer 9 the fixed elements disappear and reappear from view when scrolling. I have tested in Chrome and it works correctly there. I have also made sure that IE is using standards mode and not quirks.
This jsfiddle demonstrates my problems: http://jsfiddle.net/zache/43zCf/
Doesn't fit the character limit.
The parents of the z-indexed elements are not positionned.
You have to add to table position: inherit;
so the css for table will be :
table {
position: inherit;
white-space: nowrap;
border-collapse: collapse;
}
This worked for me.
Solution 1:
Add scrollbars on page load then remove them a short time after.
Sys.Application.add_load(function(){
if ($.browser.version == 9 && $.browser.msie) {
$('html').css('overflow-y','scroll');
setTimeout(function () {
$('html').css('overflow-y','auto');
}, 10);
}
})();
Solution 2
Set document mode to ie8 in web.config:
<add name="X-UA-Compatible" value="IE=8"/>
I was having the same issue, I was able to fix it by adding the following transform code to the fixed position element, (transform: translateZ(0);-webkit-transform: translateZ(0);) that forces the browser to use hardware acceleration to access the device’s graphical processing unit (GPU) to make pixels fly. Web applications, on the other hand, run in the context of the browser, which lets the software do most (if not all) of the rendering, resulting in less horsepower for transitions. But the Web has been catching up, and most browser vendors now provide graphical hardware acceleration by means of particular CSS rules.
Using -webkit-transform: translate3d(0,0,0); will kick the GPU into action for the CSS transitions, making them smoother (higher FPS).
Note: translate3d(0,0,0) does nothing in terms of what you see. it moves the object by 0px in x,y and z axis. It's only a technique to force the hardware acceleration.
#element {
position: fixed;
/* MAGIC HAPPENS HERE */
transform: translateZ(0);
-moz-transform: translatez(0);
-ms-transform: translatez(0);
-o-transform: translatez(0);
-webkit-transform: translateZ(0);
-webkit-font-smoothing: antialiased; /* seems to do the same in Safari Family of Browsers*/
}
I am building a multi-lingual website. Some languages (like Hebrew) read from right-to-left. Besides the actual text, those users are used to having navigation and other visual clues reversed.
For example the main menu on top would be aligned to the right. "back" button would point forward, logo on the top right instead of top left, etc.
One solution is of course to create a whole new design, however that would mean I'd have to maintain 2 templates. Not ideal.
I was just thinking, would it be possible to flip the entire design in CSS? Like looking in a mirror?
I'm also opened to better solutions if this seems far fetched.
Technologies used: PHP, Yii, Less.css, jQuery
It is possible to flip the entire site exactly as you describe with but a few lines of CSS see here: http://jsbin.com/aduqeq/5/edit
CSS:
body {
margin: 0 auto;
width: 300px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
There are a few downsides to this approach however:
1) While it works Fine in Firefox + Chrome, it only sort of works in IE8+ (the text looks very strange to me in IE) expect support to be a bit patchy (this is a new CSS3 feature)
2) There are obvious semantic disadvantages here
3) Some people seem to have a thing about vendor prefixes
Overall using RTL on the body and using a different stylesheet might be a much better alternative here, even thought it's more cumbersome for you, the end user is provided with a better experience (unfortunately the quick fixes we want aren't always available)
A lot of sites consist of a menu bar and a content area. These are usually the main areas of focus for flipping. Should be easy with 3 lines of CSS :
html[dir="rtl"] #menu {
float: right;
}
This same CSS code can easily be adapted to match other areas that should be moved. There's really no need to maintain 2 sets of templates, unless you hardcoded coordinates (which was a bad idea anyway).
Of course, make sure to set <html dir="rtl">
html {
direction:rtl;
}
This will reverse everything on page from right to left. You need to adjust this for every element in your page.
You can try:
body {
direction:rtl;
}
But that would just give you a starting point to start from...
Hope it helps.
The developers of MediaWiki, the software that powers Wikipedia in hundreds of languages, developed a tool called CSSJanus, which can cleverly flip your CSS on the fly for right-to-left languages:
https://github.com/cssjanus
This is successfully used for Wikipedias in right-to-left languages, and as a result they require very little duplicate maintenance of CSS.
You can flip the entire website using Seandunwoody his answer but that would reverse the text and icons and images and such as well.
Provided that you place your content in <p> and <h1> 2 and 3 tags, which you do not put into each other (so no <p><p></p></p>) you can apply the css like this:
body,p,h1,h2,h3 {
margin: 0 auto;
width: 300px;
-moz-transform: scaleX(-1);
-o-transform: scaleX(-1);
-webkit-transform: scaleX(-1);
transform: scaleX(-1);
filter: FlipH;
-ms-filter: "FlipH";
}
What it does is basically the double mirror trick, it mirrors the complete website and then it mirrors all the small paragraph and titles which contain your text and images back to the original orientation but still in the position of the reversed website.
Hacky but it works (not so nice on IE though).
*You also need to add the dir='rtl' to the html or body tag to make sure the text is alligned to the right and hebrew is reversed (english characters will stay left to right but allign right).
There is a great Magic Tool for that called rtlcss
TLDR;
long time ago, I got away with doing the following:
1. if an element has a direction:rtl -> remove it
2. if an element have no direction:rtl -> add one
in most cases, add direction:rtl to body
4. if element has align:right/left' -> switch left/right
5. if element hasmargin-right/left` -> switch left/right
Limitations which are not handled:
1. Statically placed elements may not be placed right
2. Relative placements may not be placed right
3. Styles in the HTML should be taken care of (if exists, suggest to move into the CSS)
be careful if you plan on using Find & Replace as right & left can be found in mysterious places.
e.g. .copyright { ... } can become .copyleft { ... }
Searching today (Jan '18) i found this great tool that do all the above for you:
Take a look at RTLCSS Website
I used it as command line, as i needed to RTL a library CSS i had once, but it can be bundled in your build steps.
I agree to Sean's answer, it actually works! But there's one thing I'd like to mention: he needs to remove the "margin" and the "width" in order to make the page more readable but still flipping.
body { -moz-transform: scaleX(-1); -o-transform: scaleX(-1); -webkit-transform: scaleX(-1); transform: scaleX(-1); filter: FlipH; -ms-filter: "FlipH"; }