What Cross-Browser issues have you faced?

Question

I'm having issues on a Drupal 8.6 multisite installation. So to debug them I downloaded a full backup from a cPanel and I'm running it using XAMPP on Windows 10. I pointed out all the website addresses to 127.0.0.1 using the hosts file.

The website is working but via HTTPS, which give me a lot of problems loading the admin. So I would like to make the website run on my local on HTTP.

I tried commenting this line in the .htaccess:

#RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,R=301]

And uncomment these:

RewriteRule ^ - [E=protossl]
  RewriteCond %{HTTPS} on
  RewriteRule ^ - [E=protossl:s]

Didn't work. I also saw in Drupal's forum about the variable table in the database. This table doesn't exist in my databases. I'm not a Drupal dev (just trying to fix the issue) so I don't actually know if it should exist.

I also saw about the $conf['securepages_enable'] = 0. This also doesn't exist in settings.php nor anywhere else.

In my httpd-vhosts.conf

<VirtualHost *:80>
    ServerName mywebsite.qc.ca 
    DocumentRoot "C:/xampp/htdocs"
    <Directory  "C:/xampp/htdocs/">
        Options +Indexes +Includes +FollowSymLinks +MultiViews
        AllowOverride All
        Order allow,deny
        Allow from all
    </Directory>
</VirtualHost>

Yes, I replaced the htdocs content with the content of the public_html from my backup. It solved some issues I was having.

What else can I try? Thanks in advance for any help.

Solution 1

Most of the problems I have are with IE, specifically IE6. Problems I personally deal with that have left a memorable impression (in no particular order):

• Having to use frameworks to do basic things because each browser implements the DOM a little differently. This is especially heinous with IE and AJAX, which necessitates multiple if-blocks just to get the call started. In an ideal world I'd be able to work in JavaScript without the framework to do basic things.

• onChange on selects in IE are implemented wrong, and fire before the select loses focus (which is incorrect). This means you can never use onChange with selects due to IE, since keyboard-only users will be crippled by this implementation issue.

• You mentioned it in your post, but it's a huge pain when IE grabs an element by name when using getElementById().

• When in an RTL locale (Arabic, Hebrew, etc.), Firefox implements "text-align: right;" incorrectly. If the container overflows for some reason, the text aligns to the right side of the viewable container, rather than the right side of the container itself (even if it makes part of it invisible).

• Different browsers have differing levels of pickiness with regards to how you end arrays and objects. For example, Firefox is more than okay with an array looking like this: [ item0, item1, ]". However, this same code will make Opera barf because it hates the trailing comma. IE will make the array a three-item array, with the third item undefined! This is bad code for sure, but there's been dynamically generated javascript I've worked on that was a huge pain to rewrite - would've been nice if this just worked.

• Everything having to do with IE's hasLayout. So much awful pain has revolved around this attribute, especially when I didn't know it existed. So many problems fixed by using hacks to add hasLayout. So many more problems created as a result of the hacks.

• Floats in IE rarely work the way you hope they do. They also tend to be annoying in other browsers, but they at least conform to a particular behavior. ;)

• IE adding extra white space between list items has caused me no end of pain, since YUI uses lists to make their menus. (To fully grasp the issue, you have to view that link in IE and another browser side by side.)

• I have lots of issues getting text not to wrap in containers in IE. Other browsers listen to "white-space: nowrap" a lot better. This has been a problem with a UI I worked on that has a resizable sidebar; in IE, the sidebar items will start to wrap if you resize it too much.

• The lack of many CSS selector types in IE6 means you have to class-up your DOM more than necessary. For example, the lack of +, :hover, :first-child.

• Different browsers treat empty text nodes differently. Specifically, when traversing the DOM with Opera, I have to worry about empty text nodes when browsing a node's children. This isn't a problem if you're looking for a particular item, but it is if you're writing code that expects a particular input and the way the browser views that input differs.

• In IE6, when you dynamically generate an iframe via javascript, the iframe sometimes doesn't fill its container automatically (even with width and height set to max). I still don't know how to solve this issue, and have been thinking of posting a question about it.

• In IE, you can't set overflow CSS on the <tbody> element. This means that scrollable tables (with a concrete <thead> and <tfoot>) are impossible to make in a simple manner.

I will probably add more to this list later, since (to me) the worst part of web development are cross-browser issues. Also, I doubt I'll ever edit out the "I will probably add more to this list later", since these problems are endless. :)

Solution 2

The only one that really gets to me:

• IE6 is still used by ~18% of the web -- that's nearly 1 in 5 -- and addressing its issues is time consuming, hackish, and frustrating. ;) The issues are really too numerous to list here.

If you're interested in the issues themselves, QuirksMode.org is an amazing resource I used every day before making the leap to client-side libraries. Also check out John Resig's The DOM is a Mess presentation at yahoo, which gives a lot of theory about how to deal with cross-browser topics efficiently.

However, if you're interested in simply having them solved, your question is an excellent example of why many consider using client-side libraries like jQuery, YahooUI, MooTools, Dojo, etc. With a thriving community, talented people and corporate backing projects like those allow you to focus on your app rather than these issues.

Here are some jQuery examples that avoid much of the cross-browser frustration and can really make all of this.. fun.

Cross-browser mouse click binding

$('#select anything + you[want=using] ~ css:selectors').click(
    function(){ 
       alert('hi');
    }
); 

Cross-browser HTML Injection

$('#anElementWithThisId').html('<span>anything you want</span>');

Cross-browser Ajax (all request objects are still made available to you)

$('p.message').load('/folder/file.html');

And what really blows me away, load a data subset with selectors (see manual for details)

$('p.message').load('/folder/file.html body p:first-child');

Now, how all this really starts to get fun: chaining methods together

$('ul.menu a').click(           // bind click event to all matched objects
  function(evt){                // stnd event object is the first parameter
    evt.preventDefault();       // method is cross-browser thx to jquery
    $(this)                     // this = the clicked 'a' tag, like raw js
      .addClass('selected')     // add a 'selected' css class to it
      .closest('ul.menu')       // climb the dom tree back up to the ul
      .find('a.selected')       // find any existing selected dom children
      .not(this)                // filter out this element from matches
      .removeClass('selected'); // remove 'selected' css class
  }
)

Reminds me of Joel's Can Your Programming Language Do This? article.

Taking all this to a theoretical level, true advancement doesn't come from what you can do with conscious thought and effort, but rather what you can do automatically (without thought or effort). Joel has a segment on this in Smart And Gets Things Done regarding interviewing questions and smart developers, completely changed my approach to programming.

Similar to a pianist who can just 'play' the music because she knows all the keys, your advancement comes not from doing more things that require thought but rather more things that require no thought. The goal then becomes making all the basics easy.. natural.. subconscious.. so we can all geek out on our higher level goals.

Client side libraries, in a way, help us do just that. ;)

Solution 3

IE6? Meh. You guys have got it easy! You've never had to make CSS layout work in Netscape 4 (without crashing the entire browser)? You've never had to write for appliance browsers that don't support tables? You've never had to write for IE Mobile?

• there is no support for JavaScript-assigned event handlers; you can only write an event handler through setting “onclick="somestring"” in innerHTML;

• most basic DOM Level 1 properties (eg. nodeName, nodeType, nodeValue, firstChild, lastChild, nextSibling, previousSibling, data, value, HTMLElement.getElementsByTagName, all HTMLTableElement members, most CSSStyleDeclaration members) simply do not exist;

• most CSS layout properties do not work; many simply CSS properties like ‘width’ don't work on some elements such as form fields;

• setting many other CSS properties on elements like tables and form fields causes an instant browser hang, which, since Windows Mobile has no built-in task manager, means you have to soft-reset the device;

• oh, and putting anything but text inside a <button> is insta-crash too;

• huge chunks of basic JavaScript methods and “DOM Level 0” methods going back as far as Netscape 2 (!) are missing.

And this is the most up-to-date release of Microsoft's flagship Windows Mobile browser in 2009.

Sure, it supports XMLHttpRequest, but writing AJAX code on a browser whose CSS and script support is less than IE3 (!) is bizarrely schizophrenic, like you're working with a weird amalgam of 21st-century and 19th-century technologies.

I wouldn't recommend it.

Solution 4

Been doing this too long to have many problems, but it still drives me nuts that I have to hack around IE's non-support for CSS things like display:table, :last-child, and :hover outside of anchors.

All the IE stuff is still insane, but it's just background insanity now :)

Solution 5

Biggest Cross-Browser Issue? - Internet Explorer!

<start_grumpy>

IE is solely responsible for "holding back the web" - us developers can't create amazing sites using HTML5, or SVG, or XFORMS, or CANVAS... not because of Firefox,Safari or Chrome, but because 2/3s of the Internet is still stuck on IE. Not to mention that ~20% of the web is still stuck on IE6! IE8 is the first version of IE to at least try to be standards compatible (2001's standards that is), which means it will be at least 2018 before we can finally start dropping all support for IE7.

</start_grumpy>

Otherwise name a DOM method that IE fully supports... the fact that this is a hard question to answer is my biggest CrossBrowser issue.

getElementById() - badly broken
getElementsByName() - buggy
getElementsByTagName() - buggy
getAttribute() - buggy
setAttribute() - majorly broken
createElement() - buggy
appendChild() - buggy

even things IE invented are messed up...

innerHTML (getting) - returns the worst markup possible
innerHTML (setting) - doesn't work on the elements you'd want to dump a bunch of data into (e.g. Tables and Selects)

View more solutions

Comments

[Wimanicesir]

You say you didn't saw $conf['securepages_enable'] = 0. Did you try to add it to your settings.php? Also, try using this as htaccess : drupalabc.xyz/question/…

[Wimanicesir]

Also vhosts files are important when using multisite setups, could you post this as well?

[André Luiz]

@Wimanicesir Just tried both, it didn't work =[

[Wimanicesir]

Yeah multisites are not easy to set up.. Can you post your vhost configuration or don't you have it?

[Wimanicesir]

Did you follow this guide btw? drupal.org/docs/8/multisite/drupal-8-multisite

[André Luiz]

@Wimanicesir I just added my vhosts config to the question

[BacMan]

I happen to use DoJo, which resolves many of the compatibility issues between browsers, however there are some issues, like the one I mentioned, which can't be resolved by a JavaScript Toolkit because the functionality is not supported by IE. Good answer though.

[Navneet]

If you just want to change the option list then you can do the following selectbox.options.length = 0; selectbox.options[selectbox.options.length] = new Option(value, key); And if you want any option preselected then selectbox.options[selectbox.options.length] = new Option(value, key, true, true);

[user1260501]

Never read that article before. A neat read.

[Navneet]

Yes, JavaScript is really a powerful language. After working on it, java seems so boring. Just try creating a list of 10 items in java and javascript and you know the difference.

[Kev]

You should check out Selenium...

[BacMan]

No, this is not the same thing. You are creating new options, which means you need to store them somewhere. This is not the same thing as hiding/showing. With this approach you don't ever need to recreate options, store, retrieve option elements.

[BacMan]

I guess my reply was a bit misleading when I said dynamically change. I'll correct it.

[Navneet]

Matt, you are providing solutions to cross-browser issues using JavaScript libraries, which hide the actual issue - the thing I want to know.

[Nosredna]

Chrome is my favorite browser. :-)

[Dan Lew]

I wish I could upvote Navneet's comment. I think a lot of JavaScript issues come up because people use frameworks without understanding that they can't fix all cross-browser issues.

[ahsteele]

@Kibbee Market Share (tinyurl.com/b3qher) is showing a similar number for IE6 usage and a much lower number for Firefox. Not sure where they pull their numbers from but Google links to these numbers and they see less developer influenced.

[BobbyShaftoe]

To say Chrome was prematurely launched is a huge understatement.

[BobbyShaftoe]

You can solve the onchange problems with timeouts.

[GOTO]

Chrome is my favorite browser now. Its great to test sites in Chrome, its so zippy. But it was launched prematurely, it's widely known that they released prematurely because the comics detailing it's revolutionary features were leaked.

[myfreeweb]

market share depends on location (IE6 in Russia only 9%) and on site theme (programming, design - very low IE6 usage. most on search, news etc.)

[Knu]

next time use CSS3 box-sizing: border-box; to switch the box model ^^

[AlexMorley-Finch]

box-sizing isn't widely supported enough to be reliable.

[MasterJoe]

Paulo, can you please give an examples of the issues in handling select ?

[phk]

This way you open yourself up for script injection.