I have an HTML page with a fixed-height div which should be scrollable (only vertically). In iOS 5 this can be achieved using:
overflow-y: auto;
-webkit-overflow-scrolling: touch;
The div contains an unordered list with about 10 items.
The scrolling works, but sometimes it scrolls only if I swipe my finger diagonally or even horizontally and not vertically as it should be.
I'm wondering if anyone has encountered this issue. I don't want to think that it is a bug in iOS5, but I can't figure out what I'm doing wrong because most of the time it works fine.
I had exactly the same issue. The problem turned out to be caused by two zero size iframes my site used to track history changes and load scripts. Removing these fixed the issue. I filed a bug with apple, waiting to hear back from them.
Check to see if you have any iframes on your page they could be the cause.
I have found a hacky solution but it needs javascript...
I stumbled upon that problem while loading scrollable nodes via ajax and appending them with js.
I found out that resetting the -webkit-overflow-scrolling property with js saved the day
JS CODE:
var myDiv = $('.myDiv');
myDiv.css('-webkit-overflow-scrolling','auto');
function fn(){
myDiv.css('-webkit-overflow-scrolling','touch');
}
setTimeout(fn,500);
It really sucks that we have to call the setTimeout method but that's the only way I could think of...
EDIT : Watch out for display:none
Webkit overflow scrolling touch CSS bug on iPad
You need to put this css setting in your css file - the one you load using the content_css configuration variable:
body {
-webkit-transform: translate3d(0, 0, 0);
}
The other option is to set the css directly from code on tinymce initialization:
$(tinymce.activeEditor.getBody()).css('-webkit-transform', translate3d(0, 0, 0));
I had the same problem in iOS 5.1.1 and it turned out to be due to an ::after pseudo-element with position: fixed that was on an element that contained the scrollable list exhibiting the "wrong scroll axis" behavior. Details here.
Related
after having spent the last few hours searching the web for this issue I decided that I need your help.
The issue is similar to this topic: Javafx: Tableview header is not aligned with rows
No answer has been provided there and also, I think, my case is slightly different:
I have a properly setup TableView with reused CellFactories and CellValueFactories. Data-wise, everything works 100% the way I intended. However once I populated my table with more rows than my view can show it naturally started to show a vertical scrollbar. From that moment on (see first screenshot) the column headers weren't aligned with the columns anymore. It appears that it is exactly the width of the scrollbar that distorted the widths distribution (I'm using ConstraintResizePolicy with a few fixed width columns and the rest relying on computed width, again, otherwise working flawlessly).
As soon as I scroll with the mouse wheel, click on an entry, tab into focus or resize the window/view, the headers snap into place (see second screenshot).
Based on the topic posted in the beginning, I think this is a bug and I'm therefore not only looking for a solution (which might not exist) but also for a workaround. I tried:
table.scrollTo()
table.scrollToColumnIndex()
table.layout()
table.requestFocus()
table.requestLayout()
table.refresh()
I know not all of those make sense but still I tried and none of them made the column headers be in line with their columns on application launch.
Every suggestion is welcomed.
I don't feel that sharing code helps here, but ask if you want something specific. The view was built with SceneBuilder 8 and consists of an AnchorPane, a TableView in the middle, and 6 TableColumns, nothing else.
Thank you very much!
I've had the same problem. It seems a bug. Try this. It works for me
Platform.runLater(() -> tableView.refresh());
I know this is an old message but I tried everything to get the headers aligned and nothing was working until I stepped away from the problem. I then tried this and it worked. Headers jump but I am ok with that. I hope this helps someone else.
Task<Boolean> task = new Task<Boolean>() {
#Override protected Boolean call() throws Exception {
Thread.sleep(300) // needs this to make sure the table is displayed
table.refresh();
table.scrollTo(0);
return true;
}
};
new Thread(task).start();
I also have the situation of TableColumns' Headers not aligend with cells.But I am not because Scrollbar.I am because of setting a border color for cells.After the CSS modified, I got the correct result.
Incorrect CSS:
.table-row-cell {
-fx-border-color: black;
}
changed to:
.table-row-cell {
-fx-table-cell-border-color: black;
}
Reference documentation: https://community.oracle.com/tech/developers/discussion/2505963/tableview-column-headers-do-not-line-up-with-rows
None of the other solutions worked for me. I noticed that the issue only occurs when the horizontal scrollbar is on the far right and then the table is cleared (table.getItems().clear()) while other content changes didn't cause the bug even if the scrollbar disappears and reappears.
I checked this bug report https://bugs.openjdk.java.net/browse/JDK-8149615 (and the linked changeset) and at first dismissed the workaround because scrolling to the first column (table.scrollToColumnIndex(0)) wasn't working for me either.
But it started working once I called scrollToColumnIndex before clearing the table with getItems().clear().
The bug report suggests reacting to the visibility change of the placeholder node. I didn't test this because I had already solved it (hopefully) and no sample code is provided. But if I ever need to revisit this I would try writing a listener for the placeholder visibility as an alternative solution.
I have made a website with Foundation-master wordpress theme, it looks good but I dont like how its behaving in other browser widths. Is there a way of making it non-responsive, or fixed to a certain width?
Thanks!
Sometimes it's necessary to deactivate the responsive features. For example if, like it happened to me twice already, a website is launching non-responsive and the optimization for smartphones/tablets is added later.
Foundation is an awesome framework even if you take out the responsiveness. The SCSS files are very well structured it comes with a library of very useful UI elements. It's a great choice for responsive and non-responsive sites if you ask me. Some people might also want to streamline their workflow and not jump between different frameworks depending on the project to keep costs low.
Anyways, here my two cents. This deactivated all responsiveness for me:
.row {
width: 62.5rem;
}
And then in the _settings.scss
$small-range: (0, 90em);
$medium-range: (0, 90em);
$large-range: (0, 90em);
This way we're essentially always seeing the large version. As far as I can tell this even works for top bar etc.
Foundation was built to simply create responsive websites.
Beside of the question why you use this framework if you don't want a responsive webseite, it's only possible if you start removing all the media queries in foundation css and by removing the viewport meta tag.
Maybe you should better invest this time to make your webseite responsive so that it also fits on smaller screens and mobile devices.
Although the question is marked as answered, I just wanted to give you a quick hint to prevent the Foundation 4 grid to act responsive, since we had also to deal with that.
In our case (SASS version) setting the width of the <body> element via css to the specific width of the grid and reducing the breakpoint in the SASS variable $small-screen to 1px worked fine.
Try to add a min-width in the body attributes like this:
html,
body {
font-size: 100%;
min-width: <value A>;
max-width: <value A>;
width: 100%;
}
(foundation.css)
I manage/webmaster half a dozen websites that have facebook like boxes on their index pages. These were all working fine until yesterday, when suddenly they all began to display to the right of the page (where previously they had been centered). No changes have been made to any of these pages in the last day or two, so I can't think of any reason why they would all suddenly right-align.
Some of these scripts are between "center" tags, Others are inside centered tables. But they're still displaying to the right of the page. I've tried everything I can think of to get them to display in the middle of the page again, but nothing I've tried works. I'm also curious to know why they would all suddenly lose their center alignment.
Anyone have any ideas?
Any help would be very much appreciated.
You can see an example of what I'm talking about at holisticspain-dot-net
.fb-like-box.fb_iframe_widget *
{
text-align: left !important;
}
This worked as a temporary fix as well.
We already apply some styling to our button (it is surrounded in <li> tags, but we found we had to change the style for this.
We previously had this style applied
.fb-tool {position:relative;left:8px;}
We changed it to this.
.fb-tool {position:relative;left:8px; text-align:left;}
Just a short answer - might help perhaps. I changed the display property of .fb_iframe_widget to relative with !important and it fixed the sudden leftiness.
Following Harold Neal and Sergei S's suggestions, you can add text-align:left; to the default style="background-color:#000000;" portion of the tag.
I am having a bit of a weird problem with iOS platform for a page i am developing. This is the page in question. When clicking any of the case study images, the page will first unhide the required case study then scroll to it.
This works on all desktop browsers on Windows and Mac, but on the iPhone and iPad you get a horrible flicker as it scrolls down.
Not quite sure how to debug or fix this issue.
Any ideas would be of great help!
Thanks in advance,
Shadi
UPDATE 1
The latest page can be found here. Still haven't found a fix - if anyone has any idea it would be amazing!
If you need vertical scroll only, you could use {'axis':'y'} as settings to scrollTo method.
$.scrollTo(*selector*, *time*, {'axis':'y'});
Have you tried this:
$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});
If you're just scrolling the page vertically you can replace the entire jQuery scrollTo plugin with this simple line:
$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');
Personally I do something like this
$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
//do stuff
});
I found that if I try to do other js work while it's scrolling it makes the browser crunch and the animation isn't smooth. But if you use the callback it'll scroll first, then do what you need.
I put a -15 at the end of .top because I wanted to show the top edge of the div I was scrolling do, simply for aesthetic purposes. 1000 is the duration in milliseconds of the animation.
Credit goes to the poster, animate, for the tip off.
Defining {'axis':'y'} has made it right! It helped me with slideUp/Down flickering.
I'm not sure if this applies to jquery animations. But the following seems to affect CSS animations.
http://css-infos.net/property/-webkit-backface-visibility
Syntax
-webkit-backface-visibility: visibility;
Parameters
visibility
Determines whether or not the back face of a transformed element is visible. The default value is visible.
edit
Try applying it to every element and see what happens.
*{
-webkit-backface-visibility: visible;
}
and try
*{
-webkit-backface-visibility: hidden;
}
It's just a guess really...
I will also confirm Tund Do's method works flawlessly. If you need a "left/right" variation of the same thing (as I did) here it is:
$('.pg6').click(function(){
var target = $('#page6');
if (target.length)
{
var left = target.offset().left;
$('html,body').animate({scrollLeft: left}, 1000);
return false;
}
});
I would guess you could combine the two, grab the top position and chain the animates for a "left/right/up/down" animation also.
I had the same problem.
The problem is the ScrollTo plugin. Instead of using scrollto.js just use .animate with scrollTop. No more flickering in ipad/iphone.
Here it is with no flickering http://www.sneakermatic.com
You should include {axis: 'y'} in your options object. Also be sure that you have not enabled interrupt option. You can test this with {interrupt: false}.
You need to add e.preventDefault(); to each .click() call. This prevents the browser's default action, which is to stay in the same place. Hope this helps!
i.e.
$("#quicksand li, .client-list li").click(function (e) {
e.preventDefault();
...
});
I'm having the same flickering on iPhone -- even with the preventDefault and return false options of canceling the default click event. It appears that on the device it tries to go back to the top of the page before scrolling. If you have both a scrollTop and scrollLeft animation going on it really gets buggy. It's jQuery's issue.. I've seen a scrolling method with mootools that doesn't have this issue. See this page: http://melissahie.com/
Thanks nicole for giving the example with mootools.
It really seems to be a jQuery issue when trying to do a animation on BOTH scrollTop and scrollLeft.
With mootools:
var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);
it works flawlessly on iOS5!
I have an accordion control that is generated in code. Earlier today it stopped rendering correctly in IE8. It would function ok, but sometimes the layout would get corrupted, and all kinds of weird graphical glitches occured. It did not fail in firefox.
I reset my IE settings to factory defaults and it fixed it. It works perfectly on another test machine, but on some of the machines on our network the graphical issues occur.
Has anyone else experienced the same or know a fix? All of our computers run internet explorer 8. If it becomes a big problem I will try forcing compatibility mode but I would prefer a more permenant fix (and also that might not even fix the issue!).
I've had issues like this in the past, most typically an issue with some CSS settings. If you use the developer tools in IE, look to see what CSS settings are being applied and try to rule that out.
A screenshot of what is happening and what should happen would be useful along with the code sample.
On your accordion headers only, place the following css code:
.accordionHeader { display: table; width: 100%; }
If you find that the headers still jump when hovering between them, use a border-top using a solid colour rather than using margin and padding. Of course this only works on designs ontop of solid colours (the border colour would need to match the background colour). Heres an example:
.accordionHeader { border-top: 10px solid #FFFFFF; }
This will fix IE8 right up! This has taken me a year to figure out lol.