cancel
Showing results for 
Show  only  | Search instead for 
Did you mean: 
kyle_martin2
Community Member

Why won't canvas fully load on safari, but it will on the app?

Jump to solution

When I try to load canvas, I get empty cards that refuse to load fully online, but the problem isn't happening on the app. Do you have any solutions?

1 Solution

Accepted Solutions
ericwerth
Community Coach
Community Coach

Hi  @kyle_martin2 and welcome to the Community! There are a couple of things that may be happening. First, while all systems are now operational a couple of days ago some users experienced problems with Canvas (see Instructure Status ). It is possible that this is what you experienced. Have you tried to log in since?

Also, there has been a number of individuals who report something similar. You could check the comparability of your computer and browser here,What are the basic computer specifications for Canvas?  and Which browsers does Canvas support? , or see if using Chrome or Firefox fixes the problem. 

If none of this works I would reach out to Canvas Support (see How do I get help with Canvas as a student? or How do I get help with Canvas as an instructor?) in hopes they could provide insight.

I hope this helps and best wishes!

View solution in original post

0 Kudos
9 Replies
ericwerth
Community Coach
Community Coach

Hi  @kyle_martin2 and welcome to the Community! There are a couple of things that may be happening. First, while all systems are now operational a couple of days ago some users experienced problems with Canvas (see Instructure Status ). It is possible that this is what you experienced. Have you tried to log in since?

Also, there has been a number of individuals who report something similar. You could check the comparability of your computer and browser here,What are the basic computer specifications for Canvas?  and Which browsers does Canvas support? , or see if using Chrome or Firefox fixes the problem. 

If none of this works I would reach out to Canvas Support (see How do I get help with Canvas as a student? or How do I get help with Canvas as an instructor?) in hopes they could provide insight.

I hope this helps and best wishes!

View solution in original post

0 Kudos
danielcktan
Community Contributor

Our learners are encountering the same problem at our end too.

Learners on Safari on MacOS experiencing loading animation for Dashboard.

Nothing is being loaded after a long wait.

323377_pastedImage_1.jpg

Hi  @danielcktan   Have you all tried in Chrome and Firefox as well to see if either of these browsers work?  I have found some instances recently where something didn't appear correctly in Chrome but did with Firefox.  Either way, if you are using a supported OS and updated/supported browser and it still isn't working, it would be best to contact Canvas Support and report the behavior (if you haven't already done so).  It would be good for Support to look into these cases to see if they can determine what exactly is happening and why.

All the best!

danielcktan
Community Contributor

Hi ericwerth‌,

We receive feedback that Chrome and Firefox is not working for our users on Mac as well.

I have contacted Canvas Support and is waiting for a response.

Thanks!

Thanks for the information  @danielcktan   Please let us know what you hear from Support!

Eric

danielcktan
Community Contributor

Hi ericwerth‌,

We got a reply from Instructure Support.

The unresponsive dashboard is due to the users accessing Canvas using a very old MacOS and outdated Safari browser.

We have advised the users to update their OS on their computers.

This is great information  @danielcktan  thank-you for the update!  It is nice to know what Support indicated so that if similar questions arise at my institution, or here in the Community, the suggestion can be passed along.

danielcktan
Community Contributor

We decided to developed a quick online tool to help us troubleshoot user issues.

We will be getting our learners to run this tool and report the results to us if they encounter problems accessing Canvas.

In this way, we will have sufficient info to better advise them on the next course of actions.

On Desktop

325612_pastedImage_2.png

On Mobile:

325613_pastedImage_1.png


We make use of JQuery Device Detector to develop this tool. We evaluated numerous JQuery solutions and decided on this plugin: JS Device Detector.

The HTML of the tool is as follows:

<div class="container h-100">
<div class="row h-100 justify-content-center align-items-center">
<div class="col-12">
<div class="card">
<div class="card-header"><h3><em class="fas fa-fw fa-clipboard-check"></em> System Readiness Check</h3></div>
<div class="card-body card-alert">
<div class="alert alert-info"><em class="fa fa-info-circle fa-2x"></em> <span>Check if device meets minimum and recommended requirements for e-Learning.</span></div>
</div>
<div class="table-responsive-sm">
<table class="card-table table table-striped table-hover">
<thead class="thead-dark">
<tr>
<th scope="col" style="width: 55px;">Plugin</th>
<th scope="col"></th> <th scope="col">Status</th>
<th scope="col">Action</th>
</tr>
</thead>
<tbody>
<tr class="browserRow">
<td class="align-middle"><img alt="Web Browser" src="/img/browser.png" width="55" /></td>
<td class="align-middle">Web Browser</td> <td class="align-middle"><span></span> <small>(Version: <span></span>)</small></td>
<td class="align-middle"><span></span></td>
</tr>
<tr>
<td class="align-middle"><img alt="Operating System" src="/img/os.png" width="55" /></td>
<td class="align-middle">Operating System</td> <td class="align-middle"><span></span></td>
<td class="align-middle"><span></span> <a class="btn btn-light disabled" href="#"><em class="fas fa-fw fa-minus-circle"></em> No Action Required</a> <br /> <small>We recommend  </small> <a class="badge badge-secondary" href="https://www.microsoft.com/en-sg/p/windows-10-home/d76qx4bznwk4?icid=All_WindowsCat_0518&amp;activetab=pivot%3aoverviewtab" target="_blank"><em class="fab fa-fw fa-windows"></em> Windows 10</a> <small>or</small> <a class="badge badge-secondary" href="https://apps.apple.com/sg/app/macos-mojave/id1398502828?mt=12&amp;ign-mpt=uo%3D4" target="_blank"><em class="fab fa-fw fa-apple"></em> macOS Mojave</a></td>
</tr>
<tr>
<td class="align-middle"><img alt="Screen Size" src="/img/screensize.png" width="55" /></td>
<td class="align-middle">Screen Size</td>
<td class="align-middle"><span></span></td> <td class="align-middle"><span></span></td>
</tr>
</tbody>
</table>
</div>
<div class="card-footer"><a class="btn btn-success float-right" href="https://lms.learnforlife.sg"><em class="fas fa-fw fa-angle-double-left"></em> Back to Sign In</a></div>
</div>
</div>
</div>
</div>

The script to initialise the plugin is as follows:

// Check Browser, OS and Devices
        $(document).ready(updateDomContent);
        $(window).on('resize', updateDomContent);
        function updateDomContent() {
            var d = $.fn.deviceDetector; // eslint-disable-line no-var
            var userAgentString = navigator.userAgent || // eslint-disable-line no-var
            navigator.appVersion;
            $('#useragent').text(userAgentString);
            // Info
            $('#info').text(JSON.stringify(d.getInfo(), false, 4));
            // General
            $('#supported').text(d.isSupported());
            $('#mobile').text(d.isMobile());
            $('#desktop').text(d.isDesktop());
            // Browser
            $('#browserVersion').text(d.getBrowserVersion());
            $('#browserName').text(d.getBrowserName());
            $('#browserId').text(d.getBrowserId());
            // OS
            $('#osVersion').text(d.getOsVersion());
            $('#osVersionString').text(d.getOsVersionString());
            $('#osVersionCategories').text(JSON.stringify(d.getOsVersionCategories()));
            $('#osVersionMajor').text(d.getOsVersionMajor());
            $('#osVersionMinor').text(d.getOsVersionMinor());
            $('#osVersionBugfix').text(d.getOsVersionBugfix());
            $('#osName').text(d.getOsName());
            $('#osId').text(d.getOsId());
            // Apple
            $('#safari').text(d.isSafari());
            $('#iphone').text(d.isIphone());
            $('#ipad').text(d.isIpad());
            $('#ios').text(d.isIos());
            $('#macos').text(d.isMacos());
            // Google
            $('#chrome').text(d.isChrome());
            $('#android').text(d.isAndroid());
            // Mozilla
            $('#firefox').text(d.isFirefox());
            // Microsoft
            $('#ie').text(d.isIe());
            $('#msie').text(d.isMsie());
            $('#edge').text(d.isEdge());
            $('#ieMobile').text(d.isIeMobile());
            $('#windowsPhone').text(d.isWindowsPhone());
            $('#windows').text(d.isWindows());
            // Opera
            $('#opera').text(d.isOpera());
            $('#operaMini').text(d.isOperaMini());
            // BlackBerry
            $('#blackberry').text(d.isBlackberry);
            // other
            $('#linux').text(d.isLinux());
            $('#bsd').text(d.isBsd());
            
            // Write Info
            $('span').each(function() {
                var _this = $(this); // eslint-disable-line no-var, no-invalid-this
                var status = _this.text(); // eslint-disable-line no-var
                _this.attr('data-status', status);
            });
            
            // Browser Actions
            if (d.getBrowserId() == 'firefox' && d.getBrowserVersion() < 67) {
                $('#browserAction').html('<a role="button" class="btn btn-warning" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"><i class="fas fa-fw fa-exclamation-circle"></i> Update Browser</a>');
            } else if (d.getBrowserId() == 'chrome' && d.getBrowserVersion() < 75) {
                $('#browserAction').html('<a role="button" class="btn btn-warning" href="https://www.google.com/chrome/" target="_blank"><i class="fas fa-fw fa-exclamation-circle"></i> Update Browser</a>');
            } else if (d.getBrowserId() == 'safari' && d.getBrowserVersion() < 11) {
                $('#browserAction').html('<a role="button" class="btn btn-warning" href="https://www.apple.com/sg/macos/how-to-upgrade/" target="_blank"><i class="fas fa-fw fa-exclamation-circle"></i> Update Mac OS</a>');
            } else if (d.getBrowserId() == 'edge' && d.getBrowserVersion() < 44) {
            $('#browserAction').html('<a role="button" class="btn btn-warning" href="https://www.whatismybrowser.com/guides/how-to-update-your-browser/edge" target="_blank"><i class="fas fa-fw fa-exclamation-circle"></i> Update Windows OS</a>');
            } else if (d.getBrowserId() == 'msie' && d.getBrowserVersion() <= 11) {
            $('#browserAction').html('<a role="button" class="btn btn-light disabled text-danger" href="#"><i class="fas fa-fw fa-exclamation-circle"></i> You are using an old web browser.</a><br><small>Use these web browsers instead:</small>   <a class="badge badge-secondary" href="https://www.mozilla.org/en-US/firefox/new/" target="_blank"><i class="fab fa-fw fa-firefox"></i> Firefox</a>   <a class="badge badge-secondary" href="https://www.google.com/chrome/" target="_blank"><i class="fab fa-fw fa-chrome"></i> Chrome</a>');
            } else {
                $('#browserAction').html('<a role="button" class="btn btn-light disabled text-success" href="#"><i class="fas fa-fw fa-check-circle"></i> Up to Date</a>');
            }
            
        }

        // Check Screen Size
        var WindowsSize=function(){
            var h=$(window).height(),
            w=$(window).width();
            $("#winSize").html(+w+" <small>(width)</small> &times; "+h+" <small>(height)</small>");
            
            if ( $(window).width() > 1023 ) {
                $('#screenAction').html('<a role="button" class="btn btn-light disabled text-success" href="#"><i class="fas fa-fw fa-check-circle"></i></a>');
            }
            else {
                $('#screenAction').html('<a role="button" class="btn btn-light disabled text-danger" href="#"><i class="fas fa-fw fa-exclamation-circle"></i> We recommend using <strong>tablet or larger device</strong> in <strong>landscape orientation</strong> for e-Learning</a>');
            }
        };
        $(document).ready(WindowsSize);
        $(window).resize(WindowsSize);

The tool is dependent on Jquery, Bootstrap 4 and Fontawesome 5, which can be loaded from CDNs.

Hope this will be useful to those who need it. Smiley Happy

You are so kind. Thank you  @danielcktan  Nice Work